/* Site name specific font size */
.site-name {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    color: var(--text) !important;
}

/* Index page stat numbers styling */
.stat-number-index {
    font-size: 2em;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}

/* Контейнер */
.logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding-bottom: 12px;
}

/* SERVER — жирный */
.logo-main {
    font-weight: 900;
    font-size: 32px;
    color: #a78bfa; /* мягкий фиолетовый */
    letter-spacing: 1px;
}

/* pulse — более легкий */
.logo-sub {
    font-weight: 500;
    font-size: 32px;
    color: #e2e8f0;
    position: relative;
}

/* Bootstrap components override for moon theme */
.form-control, .form-select {
  background-color: #22183c;
  color: #e0e0e0;
  border-radius: 8px;
  border: 1px solid rgba(141, 92, 255, 0.2);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);
}
.form-control::placeholder {
  color: #a0a0a0;
}
.form-control:focus, .form-select:focus {
    border-color: #8d5cff;
    background-color: #22173e;
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(141, 92, 255, 0.25);
}
.btn {
  border-radius: 8px;
  font-weight: 600;
  --bs-btn-padding-x: 0.75rem!important;
  --bs-btn-padding-y: 0.75rem!important;
}

.btn-primary {
  background-color: #8d5cff;
  border-color: #8d5cff;
  color: #fff;
}
.btn-primary:hover {
  background-color: #a78bfa;
  border-color: #a78bfa;
}
.btn-outline-secondary {
  color: #ccc;
  border-color: #666666;
  background-color: transparent;
}
.btn-outline-secondary:hover {
  color: #fff;
  border-color: #542771;
  background-color: #a78bfa;
}
.badge {
  font-size: 0.75em;
  border-radius: 0.375rem;
}
.list-group-item {
  background-color: transparent;
  border-color: #555;
  color: #e0e0e0;
}
.list-group-item:hover {
  background-color: rgba(141, 92, 255, 0.1);
}
.nav-tabs .nav-link.active {
  background-color: #8d5cff;
  border-color: #8d5cff;
  color: #fff;
}
.form-label {
  text-align: center;
}

/* === Стили для страницы Оферты - Moon Theme === */
.oferta-header {
    background: linear-gradient(135deg, #8d5cff, #6c48cc);
    color: white;
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.oferta-content {
    max-width: 1400px !important;
    margin: 0 auto;
}

.oferta-section {
    margin-bottom: 2.5rem;
}

.oferta-section h3 {
    border-bottom: 2px solid #8d5cff;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    color: #8d5cff;
    font-weight: 600;
}
.oferta-section h5 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.oferta-number {
    color: #b565ff;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    margin-right: 0.5rem;
}

.highlight-box-moon {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.08), rgba(181, 101, 255, 0.05));
    border: 1px solid rgba(141, 92, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.highlight-box-moon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.1), transparent);
    transition: left 0.5s;
}

.highlight-box-moon:hover::before {
    left: 100%;
}

.info-header {
    text-align: center;
    margin-bottom: 2rem;
}

.info-header i {
    font-size: 3rem;
    color: #8d5cff;
    margin-bottom: 1rem;
    display: block;
    text-shadow: 0 0 20px rgba(141, 92, 255, 0.4);
}

.info-header h4 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.info-content {
    position: relative;
    z-index: 1;
}

.lead-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .features-list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    /* Hero section mobile adjustments */
    .hero-section {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    /* Stats cards mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-card {
        padding: 1.25rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    /* Navigation mobile */
    .navbar-brand {
        font-size: 1.4rem;
    }

    .nav-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Game cards mobile */
    .game-card {
        width: 160px;
        height: 130px;
    }

    .game-name {
        font-size: 0.9rem;
    }

    /* Modal mobile adjustments */
    .modal-dialog {
        margin: 20px;
        max-width: calc(100vw - 40px);
    }

    .modal-content {
        border-radius: 12px;
    }

    /* Profile mobile */
    .profile-container {
        padding: 1rem;
    }

    .profile-container h1 {
        font-size: 2rem;
    }

    #profile {
        flex-direction: column;
        gap: 20px;
    }

    .profile-form-section,
    .profile-preview-section {
        min-width: 0;
        padding: 1rem;
    }

    /* Server cards mobile */
    .server-card-moon {
        margin-bottom: 1rem;
    }

    .server-card-header {
        padding: 1rem;
    }

    .server-card-body {
        padding: 1rem;
    }

    .server-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Partners mobile */
    .partners-slider-wrapper {
        width: 320px;
    }

    .partner-card {
        flex: 0 0 320px;
        padding: 60px 1rem 1.5rem 1rem;
    }

    .partner-logo-wrapper {
        width: 80px;
        height: 80px;
        top: -40px;
    }

    /* Hide slider buttons on mobile */
    .slider-btn {
        display: none;
    }
}

@media (max-width: 576px) {
    /* Extra small screens */
    .hero-section {
        padding: 30px 0;
    }

    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
        text-align: center;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .games-monitor h2 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .games-monitor .col-6 {
        flex: 0 0 45%;
        max-width: 45%;
        margin-bottom: 1rem;
    }

    .game-card {
        width: 100%;
        height: 120px;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }

    .logo-main, .logo-sub {
        font-size: 24px;
    }

    .nav-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .user-info .username {
        display: none;
    }

    /* Profile adjustments */
    .profile-container h1 {
        font-size: 1.8rem;
    }

    .profile-form-section,
    .profile-preview-section {
        padding: 1rem;
    }

    /* Server adjustments */
    .server-card-moon {
        margin-bottom: 0.75rem;
    }

    .server-card-header,
    .server-card-body {
        padding: 0.75rem;
    }

    .server-title {
        font-size: 0.9rem;
    }

    .server-stats-grid {
        gap: 0.5rem;
    }

    .stat-row {
        padding: 0.5rem 0.75rem;
        min-height: 36px;
    }

    .stat-value {
        font-size: 0.8rem;
    }

    /* Partners mobile */
    .partners-slider-wrapper {
        width: 280px;
    }

    .partner-item {
        flex: 0 0 280px;
    }

    .partner-card {
        flex: 0 0 280px;
        padding: 50px 0.75rem 1rem 0.75rem;
    }

    .partner-logo-wrapper {
        width: 70px;
        height: 70px;
        top: -35px;
    }

    .partner-name {
        font-size: 1.2rem;
    }

    .partner-desc {
        font-size: 0.9rem;
    }

    /* Modals */
    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 1rem;
    }

    /* Cookie banner */
    .cookie-banner-container {
        padding: 15px;
    }

    .cookie-banner-content {
        flex-direction: column;
        gap: 15px;
    }

    .cookie-banner-text p {
        font-size: 13px;
    }

    .cookie-banner-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .cookie-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    /* Very small screens */
    .hero-title {
        font-size: 1.6rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .game-card {
        height: 100px;
    }

    .game-name {
        font-size: 0.75rem;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    .logo-main, .logo-sub {
        font-size: 20px;
    }

    /* Touch-friendly buttons */
    .nav-btn, .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Server cards */
    .server-title {
        font-size: 0.85rem;
    }

    .stat-value {
        font-size: 0.75rem;
    }

    /* Partners */
    .partners-slider-wrapper {
        width: 250px;
    }

    .partner-item {
        flex: 0 0 250px;
    }

    .partner-card {
        flex: 0 0 250px;
        padding: 40px 0.5rem 0.75rem 0.5rem;
    }

    .partner-logo-wrapper {
        width: 60px;
        height: 60px;
        top: -30px;
    }

    .partner-name {
        font-size: 1rem;
    }
}

/* Touch-friendly adjustments for all mobile devices */
@media (max-width: 767px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Better touch targets */
    .nav-btn, .btn, button {
        min-height: 44px;
        min-width: 44px;
    }

    .game-card {
        cursor: pointer;
    }

    .game-card:active {
        transform: scale(0.98);
    }

    /* Adjust containers */
    .container, .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    main {
        padding: 1rem 0;
    }

    /* Better modal handling */
    .modal-dialog {
        margin: 20px;
        max-width: calc(100vw - 40px);
    }

    .modal-content {
        border-radius: 12px;
    }
}

/* Landscape orientation for phones */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        padding: 20px 0;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .game-card {
        width: 140px;
        height: 110px;
    }
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.5);
}

.feature-item i {
    font-size: 1.5rem;
    color: #8d5cff;
    flex-shrink: 0;
}

.feature-item span {
    font-weight: 600;
    color: var(--text-secondary);
}

.warning-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 193, 77, 0.1);
    border: 1px solid rgba(255, 193, 77, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    position: relative;
}
.text-muted {
    --bs-text-opacity: 1;
    color: rgb(123 82 255) !important;
}
.warning-box i {
    font-size: 1.5rem;
    color: #ffc107;
    flex-shrink: 0;
}

.warning-box div {
    color: #fff9e6;
}

.warning-box strong {
    color: #ffd700;
    font-weight: 700;
}

.contact-info {
    background: #130d2357;
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
}

.contact-card {
    background: #16112c00;
    border: 1px solid rgba(141, 92, 255, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.2), transparent);
    transition: left 0.5s;
}

.contact-card:hover::before {
    left: 100%;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(141, 92, 255, 0.4);
    border-color: rgba(141, 92, 255, 0.5);
}

.contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.3), rgba(181, 101, 255, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 15px rgba(141, 92, 255, 0.4);
}

.contact-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.contact-link i {
    width: 16px;
    text-align: center;
}

.contact-link:hover {
    background: rgba(141, 92, 255, 0.2);
    color: var(--primary);
    transform: scale(1.02);
}

.legal-notice {
    background: rgba(255, 193, 77, 0.1);
    border: 1px solid rgba(255, 193, 77, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

/* Структурные элементы оферт */
.oferta-section {
    display: none;
}
.oferta-section.active {
    display: block;
}
.oferta-nav-link.active {
    font-weight: bold;
    color: #0d6efd !important;
}

/* ===================== MOON THEME .CARD АГРЕССИВНАЯ ПЕРЕЗАПИСЬ ===================== */
/* КОРОЛЬ ДОМИНИРУЕТ НАД BOOTSTRAP CARD СТИЛЯМИ */

/* АГРЕССИВНАЯ ПЕРЕЗАПИСЬ BOOTSTRAP .card */
.card, .gm-card,
.page-wrapper .card,
.page-wrapper .card.card,
.page-wrapper .card:not(.bootstrap-card),
body.moon .card {
    /* ОТМЕНЯЕМ ВСЕ BOOTSTRAP CARD CSS ПЕРЕМЕННЫЕ */
    --bs-card-spacer-y: unset !important;
    --bs-card-spacer-x: unset !important;
    --bs-card-title-spacer-y: unset !important;
    --bs-card-title-color: unset !important;
    --bs-card-subtitle-color: unset !important;
    --bs-card-border-width: unset !important;
    --bs-card-border-color: unset !important;
    --bs-card-border-radius: unset !important;
    --bs-card-box-shadow: unset !important;
    --bs-card-inner-border-radius: unset !important;
    --bs-card-cap-padding-y: unset !important;
    --bs-card-cap-padding-x: unset !important;
    --bs-card-cap-bg: unset !important;
    --bs-card-cap-color: unset !important;
    --bs-card-height: unset !important;
    --bs-card-color: unset !important;
    --bs-card-img-overlay-padding: unset !important;
    --bs-card-group-margin: unset !important;

    /* ОТМЕНЯЕМ BOOTSTRAP FLEX MEDIA OBJECT */
    display: block !important;
    flex-direction: unset !important;
    min-width: unset !important;
    height: unset !important;
    word-wrap: break-word !important;

    /* ПРИНУЖИТЕЛЬНАЯ ОТМЕНА BOOTSTRAP BG/BORDER */
    background-color: unset !important;
    background-clip: unset !important;
    border: unset !important;
    border-radius: unset !important;
    position: unset !important;
    color: unset !important;

    /* MOON THEME ФОН СПЕЦИФИЧЕСКИ ДЛЯ EDIT PAGE */
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--text) !important;
}

/* ОТМЕНЯЕМ .card-body СТИЛИ BOOTSTRAP */
.page-wrapper .card .card-body,
body.moon .card .card-body {
    padding: unset !important;
    margin: unset !important;
    background: transparent !important;
    border: none !important;
    border-radius: unset !important;
    display: block !important;
}

/* ЗАЗОРЫ МЕЖДУ ЭЛЕМЕНТАМИ ДОЛЖНЫ ОТЛИЧАТЬСЯ ОТ BS */
.page-wrapper .card > *,
body.moon .card > * {
    margin-bottom: 1rem !important;
}

.page-wrapper .card > *:last-child,
body.moon .card > *:last-child {
    margin-bottom: 0 !important;
}

/* Убрать Bootstrap card-body interference */
.page-wrapper .card .card-body {
    background: transparent !important;
    border: none !important;
    padding: 1.5rem !important;
    margin: 0 !important;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ EDIT.PHP MOON THEME СТИЛИ ===== */

/* Градиентный текст заголовка */
.page-wrapper .gradient-text {
    background: linear-gradient(45deg, #8d5cff, #b565ff, #6c30cc);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite;
    display: inline-block;
}

/* Стиль для названия сервера в заголовке */
.page-wrapper .server-title-edit {
    padding: 8px 16px;
    border-radius: 12px;
    display: inline-block;
    border: 1px solid rgba(141, 92, 255, 0.2);
    transition: all 0.3s ease;
}

.page-wrapper .server-title-edit:hover {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.15), rgba(181, 101, 255, 0.08));
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.2);
}

/* Акцентные границы */
.page-wrapper .border-left-accent {
    border-left: 4px solid linear-gradient(180deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 4px 12px rgba(141, 92, 255, 0.1);
}

.page-wrapper .border-right-accent {
    border-right: 4px solid linear-gradient(180deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 4px 12px rgba(141, 92, 255, 0.1);
}

/* Улучшенные badge в заголовках */
.page-wrapper .badge.bg-primary {
    background: linear-gradient(135deg, #8d5cff, #b565ff) !important;
    color: white !important;
    border: 1px solid rgba(141, 92, 255, 0.3);
    box-shadow: 0 2px 8px rgba(141, 92, 255, 0.2);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Кодовый блок для IP */
.page-wrapper code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85em;
}

/* Более плавные переходы для вкладок */
.page-wrapper .nav-tabs .nav-link {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Анимации для карточек в sidebar */
.page-wrapper .card-border-left-accent,
.page-wrapper .card-border-right-accent {
    position: relative;
}

.page-wrapper .card-border-left-accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(141, 92, 255, 0.5);
}

.page-wrapper .card-border-right-accent::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
    border-radius: 2px 0 0 2px;
    box-shadow: 0 0 10px rgba(141, 92, 255, 0.5);
}

/* Улучшенные кнопки в sidebar карточках */
.page-wrapper .card .btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.page-wrapper .card .btn-primary {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    border: 1px solid rgba(141, 92, 255, 0.5);
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.3);
}

.page-wrapper .card .btn-primary:hover {
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.5);
}

.page-wrapper .card .btn-outline-secondary {
    border: 1px solid rgba(141, 92, 255, 0.3);
    color: var(--text-secondary);
    background: rgba(141, 92, 255, 0.05);
}

.page-wrapper .card .btn-outline-secondary:hover {
    background: rgba(141, 92, 255, 0.1);
    color: var(--text);
    transform: translateY(-1px);
}

/* Анимированные частицы внутри карточек edit.php */
.page-wrapper .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(141, 92, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(181, 101, 255, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(108, 48, 204, 0.04) 0%, transparent 60%);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}

/* Hover эффекты для серверных карточек */
.page-wrapper .card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 40px rgba(20, 10, 40, 0.4),
        0 24px 80px rgba(141, 92, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(141, 92, 255, 0.4);
}

/* Оверлей эффект для элементов внутри карточек */
.page-wrapper .card-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Cards inside cards должны быть безbackdrop */
.page-wrapper .card .card {
    backdrop-filter: none !important;

    margin-bottom: 1.5rem;
}

/* Правильное позиционирование формы внутри card */
.page-wrapper .card form {
    position: relative;
    z-index: 10;
}

/* Заголовки внутри карточек */
.page-wrapper .card-title {
    color: var(--text);
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
}

/* Секции внутри карточек */
.page-wrapper .card > *:not(.card-body) {
    position: relative;
    z-index: 10;
}

/* Оформление sidebar */
.oferta-sidebar-sticky {
    position: sticky;
    top: 20px;
}
.oferta-sidebar {
    background: #130d2357;
    border-color: rgba(141, 92, 255, 0.3);
}
.oferta-sidebar h6, .oferta-sidebar a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
}

.oferta-nav-link {
    color: var(--text);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 0;
}
.oferta-nav-link:hover {
    background: rgba(141, 92, 255, 0.1);
    color: var(--text);
}
.oferta-nav-number {
    color: #b565ff;
    font-weight: bold;
}
.oferta-header-card {
    background: #ffffff00 !important;
    color: white !important;
}
.oferta-date {
    color: #a39ac4 !important;
    font-style: italic;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}
.oferta-footer-note {
    color: #9eb2ff !important;
    margin-bottom: 0 !important;
    font-style: italic;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}
/* === Переопределение стилей Balance Modal для Moon Theme === */
.balance-modal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    min-height: 320px;
    width: 100%;
}




.heartbeat-svg {
    width: auto;      /* или auto */
    height: 20px;
    display: block;
}

/* === Стили для личного кабинета серверов === */
.servers-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 0;
    margin-bottom: 2rem;
}



.server-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem;
    position: relative;
}

.server-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.server-status.online {
    background: rgba(40, 167, 69, 0.9);
}

.server-status.offline {
    background: rgba(220, 53, 69, 0.9);
}

.server-content-my {
    padding: 1.5rem;
}

.server-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.server-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

/* Компактная версия информации о сервере */
.server-info-compact {
    margin-bottom: 1rem;
}

.separator {
    color: #ccc;
    margin: 0 0.25rem;
}

.server-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-edit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.btn-edit:hover {
    transform: translateY(-2px);
    color: white;
}

.btn-delete {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.btn-delete:hover {
    transform: translateY(-2px);
    color: white;
}

.btn-add-first {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.btn-add-first:hover {
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* === Стили для профиля (Moon Theme — Soft Purple) === */
.profile-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem 2rem;
    min-height: 100vh;
}

.profile-container h1 {
    color: var(--text);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(45deg, #8d5cff, #b565ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Стили для алертов */

.profile-container .alert {
    border-radius: 12px;
    border: 1px solid rgba(255, 193, 7, 0.3);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    color: #ffeaa7;
    margin-bottom: 2rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}

.profile-container .alert.alert-success {
    border-color: rgba(46, 204, 113, 0.3);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.05));
    color: #acffbf;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
}

.profile-container .alert.alert-danger {
    border-color: rgba(231, 76, 60, 0.3);
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
    color: #ffb0a2;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2);
}

.profile-container .alert i {
    font-size: 1.2rem;
    margin-right: 0.75rem;
}

/* Табы навигации в настройках */
.profile-container .nav-tabs {
    border-bottom: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-bottom: 2rem;
}

.profile-container .nav-tabs .nav-item {
    margin: 0 0.5rem;
}

.profile-container .nav-tabs .nav-link {
    border: none;
    border-radius: 12px;
    color: var(--text);
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.75rem 1.25rem;
    text-align: center;
    border: 1px solid rgba(141, 92, 255, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.profile-container .nav-tabs .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.1), transparent);
    transition: left 0.5s;
}

.profile-container .nav-tabs .nav-link:hover::before {
    left: 100%;
}

.profile-container .nav-tabs .nav-link:hover {
    background: rgba(141, 92, 255, 0.15);
    border-color: rgba(141, 92, 255, 0.4);
    transform: translateY(-2px);
}

.profile-container .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #8d5cff;
    border-color: #8d5cff;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.4);
    transform: translateY(-2px);
}

.profile-container .nav-tabs .nav-link.active i {
    color: #fff;
}

/* Панели табов */
.profile-container .tab-content {
    margin-top: 0;
}

.profile-container .tab-pane.active {
    animation: fadeInSettings 0.3s ease-out;
}

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

/* Форма профиля */
#profile {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-form-section {
    flex: 1;
    min-width: 320px;
}

.profile-preview-section {
    flex: 1;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Заголовок превью */
.profile-preview-section > div:first-child {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    margin-top: 20px;
}

/* Превью профиля */
.profile-header-preview {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(141, 92, 255, 0.3);
    border: 2px solid rgba(141, 92, 255, 0.2);
}

/* Обложка */
.cover-preview {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

/* Блок аватара */
.profile-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
    position: relative;
    z-index: 2;
}

/* Аватар в превью */
.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid rgba(141, 92, 255, 0.4);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.5);
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

.avatar-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(141, 92, 255, 0.7);
}

/* Имя */
.profile-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
}

/* Статус */
.user-status {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(167, 139, 250, 0.9);
}

/* Индикатор онлайна */
.online-status {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    background-color: #5ed39d;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 6px rgba(94, 211, 157, 0.6);
}

.online-status.offline {
    background-color: #d96f6f;
    box-shadow: 0 0 6px rgba(217, 111, 111, 0.6);
}

/* Смена пароля */
#password_profile .profile-settings-form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#password_profile form {
    -background: linear-gradient(135deg, var(--card-bg), rgba(141, 92, 255, 0.03));
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(141, 92, 255, 0.2);
    box-shadow: 0 8px 32px rgba(141, 92, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* Интеграции */
#integrations .integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 2rem 0;
}

.integration-card {
    background: linear-gradient(135deg, var(--card-bg), rgba(141, 92, 255, 0.03));
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(141, 92, 255, 0.2);
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.integration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.05), transparent);
    transition: left 0.5s;
}

.integration-card:hover::before {
    left: 100%;
}

.integration-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.4);
}

.integration-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.integration-header i {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.integration-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 700;
}

.integration-status {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-weight: 500;
}

.btn-integration,
.btn-integration-disconnect {
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-integration {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.3);
}

.btn-integration:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.5);
}

.btn-integration-disconnect {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.btn-integration-disconnect:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}

/* Общие кнопки */
.btn-save,
.auth-form button {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    border: none;
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(141, 92, 255, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-save:hover,
.auth-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(141, 92, 255, 0.6);
    background: linear-gradient(135deg, #a78bfa, #c084fc);
}

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

.btn-save:active::before,
.auth-form button:active::before {
    width: 300px;
    height: 300px;
}

/* Стили для настроек профиля */
.profile-container .alerts {
    margin-bottom: 2rem;
}

.profile-container .alerts .alert {
    margin-bottom: 1rem;
}

/* Карточка формы профиля */
.profile-form-section {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(181, 101, 255, 0.05));
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(141, 92, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.profile-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.03), transparent);
    transition: left 0.5s;
}

.profile-form-section:hover::before {
    left: 100%;
}

/* Превью профиля */
.profile-preview-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: 350px;
    max-width: 450px;
    margin: 0 auto;
}

.profile-preview-section > div:first-child {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    opacity: 0.9;
    margin-top: 20px;
    color: var(--text);
}

/* Основная карточка превью (как настоящий профиль) */
.profile-header-preview {
    position: relative;
    width: 100%;
    min-height: 250px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.2);
    border: 1px solid rgba(141, 92, 255, 0.2);
    margin: 0 auto;
}

/* Обложка в превью */
.cover-preview {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Блок информации пользователя (как в профиле) */
.profile-info-block {
    padding: 20px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    position: relative;
    background: rgba(0,0,0,0.3);
}

/* Аватар пользователя */
.user-avatar {
    position: relative;
    flex-shrink: 0;
}

.avatar-image img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

/* Индикатор онлайн */
.online-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background: #28a745;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
}

.online-indicator:not(.online) {
    display: none;
}

/* Детали пользователя */
.user-details {
    flex: 1;
    color: white;
}

.user-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.user-handle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 8px 0;
}



.stats strong {
    color: #8d5cff;
}

/* Стили инпутов */
.profile-form-section input[type="text"],
.profile-form-section input[type="email"],
.profile-form-section input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid rgba(141, 92, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.profile-form-section input:focus {
    border-color: #8d5cff;
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.profile-form-section label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    font-size: 14px;
}

/* Слайдеры */
.profile-form-section input[type="range"] {
    width: 100%;
    margin-bottom: 10px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(141, 92, 255, 0.3);
    outline: none;
}

.profile-form-section input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8d5cff;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(141, 92, 255, 0.5);
}

.profile-form-section #profileMsg {
    font-weight: 500;
}

/* Стили для формы смены пароля */
#password_profile {
    padding: 2rem 0;
}

#password_profile .form-group {
    margin-bottom: 20px;
}

#password_profile input,
#password_profile button {
    width: 100%;
    box-sizing: border-box;
}

#password_profile input {
    padding: 12px 14px;
    border: 1px solid rgba(141, 92, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 14px;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

#password_profile input:focus {
    border-color: #8d5cff;
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

#password_profile label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

#password_profile .btn-save {
    margin-top: 20px;
    border-radius: 12px;
    padding: 14px;
    font-weight: 700;
    font-size: 16px;
}

/* Адаптивность для профиля */
@media (max-width: 768px) {
    .profile-container {
        padding: 1rem;
    }

    .profile-container h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    #profile {
        flex-direction: column;
        gap: 30px;
    }

    .profile-preview-section,
    .profile-form-section {
        min-width: 0;
    }

    .profile-preview-section > div:first-child {
        font-size: 16px;
        margin-top: 0;
    }

    .profile-form-section {
        padding: 1.5rem;
    }

    #integrations .integrations-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #password_profile .profile-settings-form {
        max-width: 100%;
        padding: 1.5rem;
    }

    #password_profile form {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .profile-container .nav-tabs .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        margin: 0 0.25rem;
    }

    .profile-form-section,
    #password_profile .profile-settings-form {
        padding: 1rem;
    }
}

/* Анимированные частицы для настроек */
.profile-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(141, 92, 255, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(181, 101, 255, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.profile-header {
    position: relative;
    text-align: center;
}

/* Мягкий фиолетово-серый фон */
.profile-background {
    position: relative;
    height: 300px;
    background: #141a2a; /* мягкий светло-фиолетовый */
}

.cover-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Аватар */
.avatar-container {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid #dcd6f2; /* обводка под фон */
    box-shadow: 0 0 10px rgba(80, 60, 120, 0.25); /* мягкая фиолетовая тень */
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

/* Индикатор онлайна */
.online-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background-color: #ff5c5c; /* мягкий красный */
    border-radius: 50%;
    border: 3px solid #dcd6f2;
    z-index: 50;
}

.online-status.online {
    background-color: #5ed39d; /* спокойный зелёный */
}

/* Информация */
.profile-info {
    margin-top: 80px;
    color: #2f2a40; /* тёмно-фиолетовый текст */
}

.username {
    font-size: 2rem;
    font-weight: bold;
    color: #7d64c6;
}

.user-status {
    font-size: 1.2rem;
    color: #7d64c6; /* мягкий фиолетовый */
}

/* Новый контейнер аватара */
.avatar-container {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid #2a2436;
    background: #2a2436;
    box-shadow: 0 0 15px rgba(120, 80, 200, 0.25);
    overflow: visible;
}

/* Аватар */
.avatar-container .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Онлайн-точка */
.avatar-container .online-dot {
    position: absolute;
    bottom: 5px;
    right: 0px;
    width: 22px;
    height: 22px;
    background: red;
    border-radius: 50%;
    border: 4px solid #2a2436;
    box-shadow: 0 0 6px rgba(120, 80, 200, 0.25);
}

.avatar-container .online-dot.online {
    background: #00d26a;
}

/* Кнопки */
.user-actions {
    margin-top: 20px;
}

.user-actions .btn {
    padding: 10px 20px;
    margin: 10px;
    border-radius: 5px;
    text-decoration: none;
}

/* Основная кнопка — приглушённый фиолетовый */
.user-actions .btn-primary {
    background-color: #7d64c6; /* мягкий, пастельный */
    color: white;
}

/* Вторичная кнопка */
.user-actions .btn-secondary {
    background-color: #dcd6f2; /* нежный светло-фиолетовый */
    color: #3b3452;
}


body {
    background: linear-gradient(135deg, #0f0c1a 0%, #1a1432 50%, #0f0c1a 100%);
    color: #dde1ff;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.site-footer {
    margin-top: auto;
    color: #b7c8ff !important;
    padding: 25px 0;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

.site-footer .text-muted {
    color: #9eb2ff !important;
}

.footer-link {
    color: #94a8ff;
    font-size: 1.35rem;
    transition: 0.28s ease;
}

.footer-link:hover {
    color: #a97cff;
    text-shadow: 0 0 6px rgba(169, 124, 255, 0.6);
    transform: translateY(-3px);
}

.site-footer .bi-heart-fill {
    color: #ff5f91;
    animation: pulseMoon 1.4s infinite;
    transform-origin: center;
}

@keyframes pulseMoon {
    0%   { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 0px #ff5f91); }
    50%  { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 6px #ff5f91); }
    100% { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 0px #ff5f91); }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Moon theme colors: purple variations for the radial gradients */
    background: radial-gradient(circle at 30% 40%, rgba(141, 92, 255, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(181, 101, 255, 0.14) 0%, transparent 50%),
                radial-gradient(circle at 50% 20%, rgba(108, 48, 204, 0.12) 0%, transparent 40%);
    pointer-events: none;
    z-index: -2;
}

/* Moon theme: Global animated particles for entire page */
.global-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.global-particles .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(141, 92, 255, 0.12);
    animation: float-particle-global-moon 20s linear infinite;
}

.global-particles .particle-1 { width: 8px; height: 8px; top: 10%; left: 10%; animation-delay: 0s; }
.global-particles .particle-2 { width: 6px; height: 6px; top: 30%; left: 80%; animation-delay: 3s; background: rgba(181, 101, 255, 0.15); }
.global-particles .particle-3 { width: 4px; height: 4px; top: 60%; left: 20%; animation-delay: 6s; }
.global-particles .particle-4 { width: 10px; height: 10px; top: 80%; left: 70%; animation-delay: 9s; background: rgba(108, 48, 204, 0.1); }
.global-particles .particle-5 { width: 5px; height: 5px; top: 40%; left: 50%; animation-delay: 12s; }
.global-particles .particle-6 { width: 7px; height: 7px; top: 20%; left: 30%; animation-delay: 15s; background: rgba(167, 139, 250, 0.08); }
.global-particles .particle-7 { width: 9px; height: 9px; top: 70%; left: 40%; animation-delay: 18s; }

@keyframes float-particle-global-moon {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-120vh) translateX(50px) rotate(360deg); opacity: 0; }
}

body.moon {
    background: linear-gradient(135deg, #120a25 0%, #1e1738 50%, #120a25 100%);
    --card-bg: #20273b;
    --border-color: #2e2840;
    --text: #dde1ff;
    --text-secondary: #b7c8ff;
    --primary: #8d5cff;
    --primary-dark: #6c48cc;
}

.logo-main {
    color: #8d5cff;
    font-weight: 700;
}
.logo-sub {
    color: #dde1ff;
    font-weight: 700;
}

.nav-btn {
    text-decoration: none; /* убираем подчеркивание */
    background: #130d2357;
    color: #dde1ff;
    border-radius: 10px;
    border: none;
    padding: 0.5rem 1rem;
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
}
.nav-btn:hover {
    background: #271a4a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Легкая тень при наведении */
}

.nav-btn.login {
    background: linear-gradient(90deg, #7a3cff, #9b5fff);
    color: #fff;
}

.theme-toggle {
    background: #271a4a;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background 0.3s ease;
    color: #fff;
}
.theme-toggle:hover {
    background: #271a4a;
}

.site-footer {
    color: #b7c8ff !important;
    padding: 25px 0;
    font-family: "Poppins", sans-serif;
}

.site-footer .text-muted {
    color: #9eb2ff !important;
}

.footer-link {
    color: #94a8ff;
    font-size: 1.35rem;
    transition: 0.28s ease;
}

.footer-link:hover {
    color: #a97cff;
    text-shadow: 0 0 6px rgba(169, 124, 255, 0.6);
    transform: translateY(-3px);
}

.site-footer .bi-heart-fill {
    color: #ff5f91;
    animation: pulseMoon 1.4s infinite;
    transform-origin: center;
}

@keyframes pulseMoon {
    0%   { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 0px #ff5f91); }
    50%  { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 6px #ff5f91); }
    100% { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 0px #ff5f91); }
}

body.moon {
    --card: #20273b;
    --card-hover: #2a3250;
    --text: #dde1ff;
    --text-secondary: #b7c8ff;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --accent-border: rgba(141, 92, 255, 0.3);
    --accent-shadow: rgba(141, 92, 255, 0.25);
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}
body.moon .text-muted {
    color: #9eb2ff !important;
}
/* Кнопки фильтров игр */
.games-monitor .filter-btn {
    background: #130d2357;
    color: #dde1ff;
    border: 1px solid rgba(141, 92, 255, 0.3);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.games-monitor .filter-btn.active,
.games-monitor .filter-btn:hover {
    background: rgba(141, 92, 255, 0.5);
    color: #fff;
    border-color: rgba(141, 92, 255, 0.5);
}

/* === Карточки игр — Moon Theme === */
.game-card {
    width: 250px;
    height: 200px;
    position: relative;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.bg-img-index {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    border-radius: 18px;
}

.game-card:hover .bg-img {
    transform: scale(1.05);
}

/* Overlay */
.game-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px; /* по умолчанию видно только название */
    background: var(--overlay-bg, rgba(0, 0, 0, 0.5));
    padding: 0.25rem 0.5rem; /* уменьшенный padding для вмещения текста */
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease;
    overflow: hidden;
    border-radius: 16px;
}

/* Hover: увеличиваем высоту overlay до покрытия боковых граней и низа */
/* Hover: overlay занимает низ и боки, раскрыв вверх на 60px (30% высоты 200px) */
.game-card:hover .game-overlay {
    height: 70px; /* overlay занимает низ и боки, раскрыв вверх на 30% */
    transform: scale(1.05);
}

/* Название игры */
.game-name {
    font-size: 1rem;
    font-weight: 600;
    color: #cba6f7;
    text-align: center;
    transition: all 0.3s ease;
}

.game-card:hover .game-name {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Статистика */
.game-stats {
    display: none; /* скрыта по умолчанию */
    font-size: 0.85rem;
    color: var(--text-secondary, #b7c8ff);
    margin-top: 0.25rem;
    transition: display 0.3s ease;
    text-align: center;
}

.game-card:hover .game-stats {
    display: block; /* появляется при hover */
}

/* Responsive */
@media (max-width: 576px) {
    .game-card {
        width: 180px;
        height: 150px;
    }
}

/* === Анимированный фон — Moon Theme === */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(-45deg, #0d1220, #1a1428, #0d1220, #241b33);
    background-size: 400% 400%;
    animation: bg-shift 20s ease infinite;
    opacity: 0.05;
}

@keyframes bg-shift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.games-monitor .game-card {
    background: var(--card);
    color: var(--text);
    border: 1px solid rgba(141, 92, 255, 0.3);
    border-radius: 18px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.games-monitor .game-card:hover {
    background: var(--card-hover);
    box-shadow: 0 12px 25px rgba(141, 92, 255, 0.25);
}

.games-monitor .game-name {
    color: #dde1ff;
}

.games-monitor .monitor-title {
    color: var(--text);
}

.games-monitor .game-icon img {
    transition: transform 0.3s ease;
}

.games-monitor .game-card:hover .game-icon img {
    transform: scale(1.1);
}

/* === Стили для модального окна (Dark Theme) === */
.modal-content {
    background: linear-gradient(135deg, rgb(24 26 34 / 0%), rgb(43 47 58 / 0%));
    color: #fff; /* Белый цвет текста */
    border-radius: 12px; /* Мягкие углы */
    border: 1px solid #333; /* Легкая граница */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Тень для модала */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Плавные переходы */
}

.modal-header {
    border-bottom: 1px solid #333; /* Легкая граница */
    padding: 15px 20px;
    background: #130d2357; /* Тёмный фон для шапки */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-title {
    color: #e5def7; /* Цвет заголовка (фиолетовый) */
    font-weight: 700;
}

.modal-body {
    background: #130d2357; /* Темный фон тела модала */
    color: #fff; /* Белый текст */
    padding: 1.5rem;
    overflow-y: auto; /* Прокрутка при необходимости */
}

.modal-footer {
    background: #130d2357; /* Темный фон подвала */
    border-top: 1px solid #333;
    padding: 15px 20px;
}

/* Кнопки в подвале */
.modal-footer button {
    color: #fff;
    background: #8d5cff; /* Цвет кнопок */
    border-radius: 8px;
    padding: 0.5rem 1rem;
    border: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.modal-footer button:disabled {
    background: #18112c;
    color: #e5def7;
}

.modal-footer button:hover {
    background: #9b5fff; /* Изменение цвета при наведении */
    transform: scale(1.05); /* Легкое увеличение кнопки при наведении */
}

.modal-footer a {
    color: #8d5cff; /* Цвет ссылки */
    text-decoration: none;
    transition: color 0.3s ease;
}

.modal-footer a:hover {
    text-decoration: underline;
    color: #9b5fff; /* Цвет ссылки при наведении */
}

/* Анимация для модальных окон (плавный показ) */
.modal.fade .modal-dialog {
    transform: translate(0, -50px);
    opacity: 0;
}

.modal.fade.show .modal-dialog {
    transform: translate(0, 0);
    opacity: 1;
}

/* === Вкладки === */
.nav-tabs {
display: flex;
    gap: 8px;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(181, 101, 255, 0.05));
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.1);
    flex-wrap: wrap;
    justify-content: center;
}

.nav-tabs .nav-item {
    margin: 0 10px; /* Убираем лишние отступы между вкладками */
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 8px;
    color: #8d5cff; /* Цвет текста вкладок */
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 10px 15px;
    text-align: center;
}

.nav-tabs .nav-link.active {
    color: #fff;
    background-color: #8d5cff; /* Тёмный фон для активной вкладки */
    border-color: #8d5cff;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-tabs .nav-link:hover {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8d5cff;
}

.tab-content {
    margin-top: 15px;
}

.tab-pane {
    display: none;
    position: relative;
    z-index: 0;
    opacity: 0;
}

.tab-pane.active {
    display: block;
    z-index: 1;
    opacity: 1;
}

.tab-content .form-group {
    margin-bottom: 1rem;
}

.tab-content label {
    font-weight: 600;
    color: #ddd; /* Цвет меток для полей ввода */
}

/* === Формы внутри вкладок === */
.auth-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #442d76;
    background: #130d2333;
    color: #eae2ff;
}

.auth-form input:focus {
    border-color: #7b52ff;
    box-shadow: 0 0 8px rgba(123, 82, 255, 0.3);
}

.auth-form button {
    width: 100%;
    padding: 12px;
    background-color: #8d5cff;
    color: white;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.auth-form button:hover {
    background-color: #9b5fff;
}

/* Стили для ссылки "Забыли пароль?" */
.forgot-link {
    display: block;
    text-align: center; /* Центрируем ссылку */
    color: #7a3cff; /* Цвет ссылки */
    font-size: 14px;
    text-decoration: none;
    margin-top: 15px; /* Отступ сверху */
}

.forgot-link:hover {
    text-decoration: underline; /* Подчеркнуть при наведении */
    color: #9b5fff; /* Цвет при наведении */
}

/* Стили для кнопок соцсетей (Moon Theme) */
.social-btn {
    background-color: #20273b; /* Темный фон для кнопок */
    color: #dde1ff; /* Светлый цвет текста */
    border-radius: 50%;
    padding: 20px;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    text-decoration: none;
    margin: 0 10px;
}

.social-btn:hover {
    background-color: #2a3250; /* Цвет фона при наведении */
    text-decoration: none;
}

.social-btn i {
    transition: color 0.3s ease;
}

.social-btn:hover i {
    color: #dde1ff; /* Цвет иконки при наведении */
}

/* Стили для иконок соцсетей (Moon Theme) */
.social-btn {
    color: #8d5cff; /* Фиолетовый цвет иконок на луной теме */
    font-size: 32px; /* Средний размер иконок */
    transition: color 0.3s ease;
    text-decoration: none;
    margin: 0 15px;
    display: inline-block;
}

.social-btn:hover {
    color: #9b5fff; /* Изменение цвета при наведении */
}

.modal-footer {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* === Меню пользователя === */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #130d2357; /* Темный фон для меню */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.user-menu:hover {
    transform: scale(1.02); /* Легкое увеличение при наведении */
    background-color: #271a4a; /* Подсветка при наведении */
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #dde1ff; /* Светлый текст для moon темы */
}

.user-info .username {
    font-size: 14px;
    font-weight: 600;
    color: #dde1ff; /* Цвет имени */
    text-transform: capitalize;
}

.user-info .fa-chevron-down {
    color: #dde1ff; /* Цвет стрелки */
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Removed hover rotate */

.user-menu.open .fa-chevron-down {
    transform: rotate(180deg) !important;
}

/* Выпадающее меню */
.dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #141a2a; /* Темный фон для выпадающего меню */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Легкая тень */
    width: 160px;
    z-index: 1000;
    transition: opacity 0.3s ease; /* Плавное исчезновение */
}

.dropdown.show {
    display: block;
}

/* Removed :active display */

/* Стили для элементов выпадающего меню */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    text-decoration: none;
    color: #dde1ff; /* Светлый цвет для текста */
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.dropdown-item:hover {
    background: #2a3250; /* Темный акцент при наведении */
    color: #8d5cff; /* Фиолетовый акцент */
}

/* Разделитель */
.dropdown-divider {
    height: 1px;
    background: #444; /* Темный разделитель */
    margin: 4px 0;
}

/* Стили для кнопки выхода */
.dropdown-item.logout {
    color: #ff4d6d; /* Красный цвет для выхода */
    font-weight: 600;
    border-radius: 10px;
}

.dropdown-item.logout i {
    color: #ff4d6d;
    border-radius: 10px;
}

.dropdown-item.logout:hover {
    background: rgba(255, 77, 77, 0.1);
    color: #ff3a3a;
}

.dropdown-item.logout:hover i {
    color: #ff3a3a;
}

/* === Аватар пользователя в header === */
.user-info .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #8d5cff; /* Фиолетовая рамка для аватара */
    box-shadow: 0 0 6px rgba(141, 92, 255, 0.3); /* Тень с фиолетовым оттенком */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-info .avatar:hover {
    transform: scale(1.06);
    box-shadow: 0 0 10px rgba(141, 92, 255, 0.5); /* Подсветка при наведении */
}

/* === Иконка пользователя (если аватар не задан) === */
.user-info .fa-user-circle {
    font-size: 1.4rem;
    color: #8d5cff; /* Фиолетовый цвет для иконки */
    background: rgba(141, 92, 255, 0.1); /* Легкий фиолетовый фон */
    border-radius: 50%;
    padding: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 0 0 2px transparent;
}

.user-info:hover .fa-user-circle {
    color: #a78bfa; /* Более яркий фиолетовый */
    background: rgba(141, 92, 255, 0.2); /* Темный фиолетовый при наведении */
    box-shadow: 0 0 6px rgba(141, 92, 255, 0.4);
    transform: scale(1.05);
}

/* === Лунная тема профиля (фиолетовая, но не яркая) === */

/* Аватар */
.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #3a2f50;
    box-shadow: 0 8px 25px rgba(120, 80, 200, 0.15);
    background-size: cover;
    background-position: center;
    background-color: #2a2436;
}

/* Маленькая заметка */
.small-note {
    font-size: 0.9rem;
    color: #a39ac4;
    margin-top: 6px;
}

/* Предпросмотр обложки */
.cover-preview {
    width: 100%;
    max-width: 600px;
    height: 200px;
    border-radius: 18px;
    overflow: hidden;
    border: 5px solid #3a2f50;
    background-size: cover;
    background-position: center;
    background-color: #2a2436;
    box-shadow: 0 8px 25px rgba(120, 80, 200, 0.15);
}

/* Контейнер шапки */
.profile-header-preview {
    position: relative;
    width: 100%;
    height: 300px;
}

/* Обложка */
.profile-header-preview .cover-preview {
    width: 100%;
    height: 60%;
    border-radius: 12px;
}

/* Обёртка аватара */
.profile-header-preview .avatar-wrapper {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
}

/* Аватар в шапке */
.profile-header-preview .avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid #2a2436;
    background-color: #2a2436;
    box-shadow: 0 4px 15px rgba(120, 80, 200, 0.2);
}

/* Центровка имени */
.profile-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
}

.profile-name {
    font-size: 36px;
    font-weight: 700;
    margin-top: -20px;
    text-align: center;
    color: #e3dcff;
}

/* Статус онлайн */
.avatar-wrapper .online-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    border: 3px solid #2a2436;
}

.avatar-wrapper .online-status.online {
    background-color: #00d26a;
}

/* Новый контейнер аватара */
.avatar-container {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid #2a2436;
    background: #2a2436;
    box-shadow: 0 0 15px rgba(120, 80, 200, 0.25);
    overflow: visible;
}

/* Аватар */
.avatar-container .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Онлайн-точка */
.avatar-container .online-dot {
    position: absolute;
    bottom: 5px;
    right: 0px;
    width: 22px;
    height: 22px;
    background: red;
    border-radius: 50%;
    border: 4px solid #2a2436;
    box-shadow: 0 0 6px rgba(120, 80, 200, 0.25);
}

.avatar-container .online-dot.online {
    background: #00d26a;
}

/* Текстовый статус */
.user-status {
    margin-top: 6px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    color: #c6b5ff;
}

/* Форма настроек */
.settings-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.settings-form {
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
}

.settings-form input,
.settings-form button {
    width: 100%;
    box-sizing: border-box;
}

/* Центровка формы */
.profile-settings-form {
    width: 600px;
    margin: 0 auto;
}

/* Поля формы */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    color: #dcd2ff;
}

.form-group input {
    width: 100%;
    padding: 14px;
    border: 1px solid #4b3a66;
    border-radius: 8px;
    background: #2e2640;
    color: #eae2ff;
    font-size: 16px;
    transition: 0.2s;
}

.form-group input:focus {
    border-color: #7b52ff;
    box-shadow: 0 0 8px rgba(123, 82, 255, 0.3);
}

/* Кнопка */
.btn-save {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    background: #7b52ff;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}

.btn-save:hover {
    background: #643fd9;
}

/* ============================ АВТО-СКРОЛЛ НАЗВАНИЯ ============================ */
.server-card-new .title-scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0;
    top: 6.5px;
}

.server-card-new .server-title {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: transform 3s linear;
}

/* Поле поиска */
.search-bar input {
    padding: 10px 10px 10px 35px;
    background-color: #271a4a;
    color: #e5def7;
    border: 1px solid #4b4060;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
}

.search-bar input:focus {
    outline: none;
    background-color: #332c4a;
    border-color: #8d5cff;
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.5);
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

.search-bar input::placeholder {
    color: #a89cb2;
    opacity: 1;
}

/* Стили для поиска игр на главной */
#game-search {
    background-color: #130d2357;
    color: #e5def7;
    border: 1px solid #4b4060;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
}

#game-search::placeholder {
    color: #e5def7;
}

#game-search:focus {
    outline: none;
    background-color: #1c2234;
    border-color: #8d5cff;
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.5);
}

/* Основная структура */
.content-container {
    display: flex;
    gap: 12px;
    margin: 20px;
    flex-wrap: wrap;
}

.left-block {
    width: 100%;
    max-width: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(50, 30, 80, 0.25);
    flex: 0.6;
    box-sizing: border-box;
    height: auto;
    min-height: 500px;
}

.right-block {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(50, 30, 80, 0.25);
    flex: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    border: 1px solid rgba(141, 92, 255, 0.2);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);
}

.servers-container {
    padding: 20px;
    border-radius: 10px;
    color: white;
    width: 100%;
    max-width: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Внутренности блоков */
.share-container, .servers-container {
    width: 100%;
    box-sizing: border-box;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
        gap: 10px;
    }
    .left-block, .right-block {
        width: 100%;
    }
}

/* Стили для блока с шарингом */
.share-container {
    border: 1px solid rgba(141, 92, 255, 0.2);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);
    padding: 20px;
    border-radius: 10px;
    color: white;
    width: 100%;
    max-width: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.share-container:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(70, 50, 120, 0.35);
}

.share-container h3 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.social-button {
    text-decoration: none;
    width: 45px;
    height: 45px;
    background-color: #241b33;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    font-size: 22px;
    transition: background-color 0.3s, transform 0.3s;
    background: #2a1d4a;
    border: 1px solid rgba(141, 92, 255, 0.3);
}

.social-button:hover {
    background-color: #6d4ec4;
    transform: translateY(-5px);
}

.social-button:active {
    transform: translateY(2px);
}

.share-link-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    position: relative;
}

.share-link {
    width: 100%;
    padding: 12px;
    background-color: #20172c;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding-right: 40px;
    background: #2a1d4a;
    border: 1px solid rgba(141, 92, 255, 0.3);
}

.share-link:focus {
    outline: none;
}

.share-link:hover {
    background-color: #6d4ec4;
}

.copy-btn {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 22px;
    position: absolute;
    right: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.copy-btn:hover {
    color: #6d4ec4;
}

/* HEADER */
.header {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.game-info {
    flex: 0 0 50%;
    font-size: 24px;
    font-weight: bold;
    color: white;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

.search-bar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.search-bar {
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    max-width: 300px;
    position: relative;
}

.search-bar .search-icon {
    position: absolute;
    left: 14px;
    color: #b49dd8;
    font-size: 18px;
}

.search-bar input {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    padding: 13px 10px 10px 40px;
    color: white;

    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    background: #2a1d4a;
    border: 1px solid rgba(141, 92, 255, 0.3);
}

.search-bar input:focus {
    outline: none;
    background-color: #2a1f3d;
}

.search-bar input::placeholder {
    color: #b49dd8;
    opacity: 1;
}

/* ADD SERVER BUTTON */
.add-server-btn {
    display: flex;
    justify-content: flex-start;
}

.update-server-btn .button {
    padding: 10px 15px;
    background-color: #6d4ec4;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    width: auto;
}

.update-server-btn .button:hover {
    background-color: #5a3ba8;
}

/* GRID */
.servers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* SERVER CARD - COMPACT WITH VISIBLE INFO & BEAUTIFUL */
.server-card-new {
    position: relative;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(141, 92, 255, 0.25);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(20, 10, 40, 0.3);
    color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    margin-bottom: 6px;
}

.server-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.03), rgba(181, 101, 255, 0.01));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.server-card-new:hover::before {
    opacity: 1;
}

.server-card-new:hover {
    /* Disabled card hover effect */
    transform: none !important;
}

.server-card-new .bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
}

.server-card-new .bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 25, 0.65);
    z-index: 1;
}

/* TOP Badge Styles */
.top-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    font-weight: 700;
    color: #ffd700;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
    position: static;
}

/* TOP Row - Badge left, title right */
.server-card-new .top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.top-badge:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 193, 7, 0.2));
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.top-icon {
    font-size: 12px;
    line-height: 1;
}

.top-text {
    font-size: 11px;
}

/* Disable card hover when hovering over top-badge */
.server-card-new.no-hover:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: initial !important;
}

.server-card-new .server-content {
    position: relative;
    z-index: 2;
}

.server-card-new .top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* STATUS BADGE */
.status-badge {
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
}

.status-badge.online {
    background: #6fd98c;
}

.status-badge.offline {
    background: #d96f6f;
}

/* INFO LINES */
.info-line {
    font-size: 15px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    margin: 4px 0;
    color: #cfc4e8;
}

/* INFO GRID - flex для расположения по строкам */
.info-grid .info-line {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgb(76 77 77 / 47%);
    border-color: rgb(42 41 41 / 47%);
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 24px;
    justify-content: flex-start;
}

.info-grid .info-line:hover {
    background: rgba(141, 92, 255, 0.12);
    border-color: rgba(141, 92, 255, 0.3);
    transform: translateY(-1px);
}

/* Цвета для разных типов информации */
.info-grid .info-line-map {
    background: rgb(76 77 77 / 47%);
    border-color: rgb(42 41 41 / 47%);
}

.info-grid .info-line-players {
    background: rgb(76 77 77 / 47%);
    border-color: rgb(42 41 41 / 47%);
    color:#00d26a;
}

.info-grid .info-line-location {
    background: rgb(76 77 77 / 47%);
    border-color: rgb(42 41 41 / 47%);
}

.info-grid .info-line-ip {
    background: rgb(76 77 77 / 47%);
    border-color: rgb(42 41 41 / 47%);
}

.info-grid .info-line-vac {
    background: rgb(76 77 77 / 47%);
    border-color: rgb(42 41 41 / 47%);
}

.info-grid .info-line-votes {
    background: rgba(255, 107, 157, 0.1);
    border-color: rgba(255, 107, 157, 0.2);
    display: inline-flex;
}

/* Красивое расположение голосов в правом верхнем углу */
.votes-display {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.25), rgba(255, 107, 157, 0.15));
    border: 2px solid rgba(255, 107, 157, 0.4);
    border-radius: 16px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    color: #ff73a6;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
    backdrop-filter: blur(10px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
}

.votes-display::before {
    content: "⭐";
    font-size: 14px;
}

.votes-display:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 107, 157, 0.4);
}

/* GAME INFO */
.game-info p {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    font-size: 14px;
    color: #b49dd8;
    margin-top: 5px;
}

/* LOAD MORE */
.load-more {
    text-align: center;
    margin-top: 20px;
}

.load-more a, #load-more-btn {
    padding: 10px 20px;
    background-color: #6d4ec4;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.load-more a:hover, #load-more-btn:hover {
    background-color: #5a3ba8;
}

/* VOTES BADGE */
.votes-badge-bottom {
    position: absolute;
    bottom: -10px;
    background: #c4a3ff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    box-shadow: 0 0 6px rgba(80, 50, 120, 0.35);
    pointer-events: none;
}

/* IP + BUTTONS */
.ip-line {
    display: flex;
    align-items: center;
}

.ip-text {
    font-weight: 600;
    white-space: nowrap;
}

.ip-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(200, 170, 255, 0.15);
    cursor: pointer;
    transition: 0.2s;
}

.icon-btn:hover {
    background: rgba(200, 170, 255, 0.3);
}

/* PLAY Button */
.play-btn {
    color: #9df5b3;
    border-color: #9df5b3;
    text-decoration: none;
}

.play-btn:hover {
    background: #9df5b3;
    color: #000;
}

/* IP line with actions */
.info-line-ip {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ip-actions {
    display: flex;
    align-items: center;
}

.ip-actions button,
.ip-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-decoration: none;
}

.ip-actions button {
    background: rgba(141, 92, 255, 0.1);
    color: #8d5cff;
}

.ip-actions button:hover {
    background: rgba(141, 92, 255, 0.25);
    transform: scale(1.1);
}

.ip-actions a {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.ip-actions a:hover {
    background: rgba(46, 204, 113, 0.25);
    transform: scale(1.1);
}

.game-select-modal .modal-header {
    display: flex;
    justify-content: center;
    position: relative;
    background: #130d23f0;
}

.game-select-modal .modal-header .btn-close {
    position: absolute;
    right: 16px;
}

/* Модальное окно */
.game-select-modal .modern-modal {
    background: #130d2300;
    border-radius: 18px;
    color: #e8e3f5;
    overflow: hidden;
}

/* Тело модального окна */
.game-select-modal .modal-body {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Скролл */
.game-select-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

.game-select-modal .modal-body::-webkit-scrollbar-thumb {
    background: #4b4362;
    border-radius: 8px;
}

.game-select-modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

/* Сетка карточек */
.game-select-modal .game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Карточка */
.game-select-modal .game-card {
    position: relative;
    height: 150px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transform: translateY(10px);
    opacity: 0;
    transition: 0.25s ease;
    border: 2px solid transparent;
}

/* Анимация */
.game-select-modal .fade-in {
    animation: fadeInUp 0.45s ease forwards;
}

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

/* Фон игры */
.game-select-modal .game-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
    transition: 0.3s;
}

.game-select-modal .game-card:hover .game-bg {
    filter: brightness(1);
    transform: scale(1.05);
}

/* Блюр-плашка */
.game-select-modal .game-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 12px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    background: rgba(42, 35, 58, 0.55);
    text-align: center;
    color: #e5def7;
}

/* Активная */
.game-select-modal .game-card.active {
    border-color: #8d6bff;
    box-shadow: 0 0 15px rgba(141, 107, 255, 0.35);
}

/* Поиск */
#addServerModal .game-select-modal .search-input {
    background: #130d2357;
    border: 1px solid #332e46;
    color: #ffffff;
}

/* Страница */
.page-wrapper {
    padding: 40px 0;
}

.breadcrumbs {
    color: #a29bb8;
    font-size: 14px;
    margin-bottom: 10px;
}

.breadcrumbs a {
    color: #b8b2ce;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #d4cde9;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.page-header img.game-icon {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #eee9ff;
}

/* Карточка */
.gm-card {
    background: #130d2357;
    border-radius: 16px;
    border: 1px solid #19122e;
    padding: 30px;
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

.gm-card-title {
    font-size: 24px;
    color: #f2edff;
    margin-bottom: 10px;
}

.gm-card-desc {
    color: #bcb6d2;
    font-size: 15px;
    margin-bottom: 25px;
}

/* Поля */
.gm-form .gm-input {
    margin-bottom: 18px;
}

.gm-form label {
    display: block;
    margin-bottom: 6px;
    color: #ded8f1;
    font-size: 15px;
}

.gm-form input {
    width: 100%;
    background: #130d2333;
    border: 1px solid #442d76;
    border-radius: 10px;
    padding: 12px 14px;
    color: #ffffff;
    font-size: 15px;
}

.gm-form input::placeholder {
    color: #8a83a1;
}

.gm-form input:focus {
    border-color: #8d6bff;
    outline: none;
}

/* Кнопка */
.gm-btn {
    width: 100%;
    background: #7c63d9;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #f5f2ff;
    cursor: pointer;
    transition: 0.25s;
}

.gm-btn:hover {
    background: #8c75e4;
}

/* === Карточки игр — Moon Theme === */
.game-card {
    width: 250px;
    height: 200px;
    position: relative;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.game-card:hover .bg-img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 576px) {
    .game-card {
        width: 180px;
        height: 150px;
    }
}

@media (max-width: 768px) and (min-width: 577px) {
    .game-card {
        width: 220px;
        height: 180px;
    }
}

/* Stats Styles - Moon Theme */
.stats-container {
  max-width: 1400px;
  margin: 0 auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stats-card {
  background: linear-gradient(135deg, var(--primary, #8d5cff), var(--primary-dark, #6c48cc));
  color: #fff;
  border-radius: 20px;
  padding: 25px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.stats-card-primary {
  background: linear-gradient(135deg, var(--primary, #8d5cff), var(--primary-dark, #6c48cc));
}

.stats-card-success {
  background: linear-gradient(135deg, var(--success, #6fd98c), var(--success-dark, #4ea76d));
}

.stats-card-warning {
  background: linear-gradient(135deg, var(--warning, #f39c12), var(--warning-dark, #c87f0a));
  color: #000;
}

.stats-card-danger {
  background: linear-gradient(135deg, var(--danger, #d9534f), var(--danger-dark, #a93226));
}

.stats-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 3em;
  opacity: 0.8;
}

.stats-label {
  font-size: 1rem;
  opacity: 0.9;
}

.stats-value {
  font-size: 2.5em;
  font-weight: 900;
  margin: 10px 0 0 0;
}

.stats-sub {
  opacity: 0.9;
}

.stats-chart-card {
  border: 1px solid var(--border-color, #2e2840);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.stats-chart-header {
  background: #1f1638;
  color: var(--text, #dde1ff);
  border-bottom: 1px solid var(--border-color, #2e2840);
  font-weight: 600;
  padding: 15px 20px;
}

.stats-chart-body {
  padding: 20px;
}

.stats-health-card {
  background: linear-gradient(135deg, var(--primary, #8d5cff), var(--primary-dark, #6c48cc));
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stats-health-body {
  padding: 20px;
}

.stats-health-icon {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.stats-health-title {
  font-size: 1.4em;
  margin-bottom: 10px;
}

.stats-health-value {
  font-size: 2em;
  font-weight: 900;
}

.stats-current-card {
  border: 1px solid var(--border-color, #2e2840);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stats-current-body {
  padding: 30px;
}

.stats-current-title {
  color: var(--text, #dde1ff);
  font-weight: 700;
  margin-bottom: 20px;
}

.stats-current-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.stats-current-item {
  text-align: center;
}

.stats-current-icon {
  font-size: 4em;
  color: var(--primary, #8d5cff);
  margin-bottom: 15px;
}

.stats-current-value {
  margin: 15px 0;
  font-weight: 800;
  color: var(--text, #dde1ff);
}

.stats-current-info {
  color: var(--text-secondary, #b7c8ff);
}

.stats-uptime7 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--primary, #8d5cff);
}

/* Root variables for moon theme */
:root {
  --card-bg: #20273b;
  --border-color: #2e2840;
  --accent-bg: #141a2a;
  --text: #dde1ff;
  --text-secondary: #b7c8ff;
  --primary: #8d5cff;
  --primary-dark: #6c48cc;
  --success: #6fd98c;
  --success-dark: #4ea76d;
  --warning: #f39c12;
  --warning-dark: #c87f0a;
  --danger: #d9534f;
  --danger-dark: #a93226;
  --accent-primary: #8d5cff;
  --accent-secondary: #6c48cc;
}

/* Banner Styles */
.banner-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.banner-card {
  padding: 30px;
}

.banner-title {
  font-size: 1.8em;
  font-weight: 800;
  margin-bottom: 25px;
  color: var(--text);
}

.banner-upload-section {
  margin-bottom: 40px;
}

.banner-upload-label {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text);
}

.banner-upload-input-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.banner-upload-area {
  flex-shrink: 0;
}

.banner-upload-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary, #7a3cff);
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.banner-upload-btn:hover {
  background: var(--primary-dark, #5a2aff);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(122, 60, 255, 0.4);
}

.banner-upload-btn i {
  font-size: 1.2em;
}

.banner-upload-info {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.banner-preview-section {
  margin-bottom: 30px;
}

.banner-preview-label {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text);
}

.banner-preview {
  width: 100%;
  height: 200px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.banner-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-align: center;
  background: var(--accent-bg);
}

.banner-preview-placeholder i {
  font-size: 3em;
  margin-bottom: 10px;
  opacity: 0.5;
}

.banner-controls-group {
  background: var(--accent-bg);
  border-radius: 15px;
  padding: 25px;
}

.banner-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.banner-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner-control label {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.banner-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: var(--border-color);
  outline: none;
  transition: background 0.3s ease;
}

.banner-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary, #7a3cff);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(122, 60, 255, 0.2);
  transition: all 0.2s ease;
}

.banner-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.banner-range-val {
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.banner-reset-btn {
  background: var(--danger, #dc3545);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
}

.banner-reset-btn:hover {
  background: var(--danger-dark, #c82333);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.banner-side {
  position: sticky;
  top: 20px;
}

.banner-current-title {
  padding: 20px 20px 15px;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-color);
}

.banner-current-img {
  padding: 15px;
}

.banner-current-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.banner-current-info {
  padding: 0 20px 15px;
  color: var(--text-secondary);
  font-size: 14px;
}

.banner-current-placeholder {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.banner-current-placeholder i {
  font-size: 3em;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* Banner Modal Styles */
.banner-modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text);
}

.banner-modal-header {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--text);
}

.banner-modal-title {
  color: var(--text);
}

.banner-modal-body {
  padding: 30px;
}

.banner-drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.banner-drop-zone.dragover {
  border-color: var(--primary, #7a3cff);
  background: rgba(122, 60, 255, 0.05);
}

.banner-drop-content i {
  font-size: 4em;
  margin-bottom: 20px;
  color: var(--text-secondary);
}

.banner-drop-content h5 {
  color: var(--text);
  margin-bottom: 10px;
}

.banner-drop-content p {
  color: var(--text-secondary);
}

.btn-link {
  color: var(--primary, #7a3cff);
  text-decoration: none;
}

.btn-link:hover {
  color: var(--primary-dark, #5a2aff);
  text-decoration: underline;
}

.banner-crop-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.banner-crop-container img {
  max-width: 100%;
  height: auto;
}

.banner-crop-overlay {
  position: absolute;
  border: 2px solid var(--primary, #7a3cff);
  background: rgba(122, 60, 255, 0.2);
  pointer-events: none;
  cursor: move;
}

.banner-crop-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* Reviews section and cards - Profiles */
@media (max-width: 1024px) {
  #reviews-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #reviews-section {
    grid-template-columns: repeat(1, 1fr);
  }
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.rating {
  font-size: 1.2em;
  color: #ffd700;
}

.date {
  color: var(--text-secondary);
  font-size: 0.9em;
}

.server-name {
  display: block;
  margin-top: 10px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Integrations section - Settings */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.integration-card {
  background: #1b123336;
  border: 1px solid #442d76;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.integration-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.integration-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.integration-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.2em;
}

.integration-status {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.btn-integration, .btn-integration-disconnect {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 5px;
  transition: background 0.2s ease;
}

.btn-integration:hover {
  background: var(--primary-dark);
}

.btn-integration-disconnect {
  background: #dc3545;
}

.btn-integration-disconnect:hover {
  background: #c82333;
}

/* Integrations profile styles */
.integrations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  justify-content: center;
}

.integration-card-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  min-width: 120px;
  transition: transform 0.2s ease;
}

.integration-card-profile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.integration-card-profile span {
  font-weight: 600;
  color: var(--text);
}

/* === Modern Hero Section - Moon Theme === */
.hero-section {
    min-height: 10vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(141, 92, 255, 0.12);
    animation: float-particle 15s linear infinite;
}

.particle-1 { width: 8px; height: 8px; top: 10%; left: 10%; animation-delay: 0s; }
.particle-2 { width: 6px; height: 6px; top: 30%; left: 80%; animation-delay: 3s; background: rgba(181, 101, 255, 0.15); }
.particle-3 { width: 4px; height: 4px; top: 60%; left: 20%; animation-delay: 6s; }
.particle-4 { width: 10px; height: 10px; top: 80%; left: 70%; animation-delay: 9s; background: rgba(108, 48, 204, 0.1); }
.particle-5 { width: 5px; height: 5px; top: 40%; left: 50%; animation-delay: 12s; }

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

.text-gradient {
    background: linear-gradient(45deg, #8d5cff, #b565ff, #6c30cc);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.highlight-word {
    position: relative;
    color: #fdf7ff;
}

.highlight-word::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #8d5cff, #b565ff, #6c30cc);
    border-radius: 1px;
    animation: highlight-glow 2s ease-in-out infinite alternate;
}

@keyframes highlight-glow {
    0% { box-shadow: 0 0 3px rgba(141, 92, 255, 0.5); }
    100% { box-shadow: 0 0 15px rgba(141, 92, 255, 0.8), 0 0 25px rgba(181, 101, 255, 0.3); }
}

.animate-fade-in { animation: fadeIn 1s ease-out; }
.animate-slide-up { animation: slideUp 0.8s ease-out; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-bounce-gentle { animation: bounceGentle 2s ease-in-out infinite; }
.animate-pulse-gentle { animation: pulseGentle 2s ease-in-out infinite; }

.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }

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

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

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

@keyframes bounceGentle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulseGentle {
    0%, 100% { box-shadow: 0 0 0 0 rgba(141, 92, 255, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(141, 92, 255, 0); }
}



@keyframes float_particle {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(100px) rotate(360deg); opacity: 0; }
}

@keyframes gradient_shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes highlight_glow {
    0% { box-shadow: 0 0 3px rgba(141, 92, 255, 0.5); }
    100% { box-shadow: 0 0 15px rgba(141, 92, 255, 0.8), 0 0 25px rgba(181, 101, 255, 0.3); }
}

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

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

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

@keyframes bounce_Gentle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulse_Gentle {
    0%, 100% { box-shadow: 0 0 0 0 rgba(141, 92, 255, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(141, 92, 255, 0); }
}

/* Quill alignment classes for server descriptions */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-align-left { text-align: left; }

/* === Balance Modal Styles === */
.yoomoney-brand {
    color: #ffdb4d;
}

.yoomoney-brand .fa-yen-sign {
    color: #ffdb4d;
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.payment-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(141, 92, 255, 0.1);
    margin: 2px;
    font-size: 18px;
}

.balance-modal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    min-height: 320px;
    width: 100%;
}

.balance-modal-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
}

/* Divider line between columns */
.balance-modal-layout::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 60px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(141, 92, 255, 0.6),
        rgba(141, 92, 255, 0.2),
        transparent
    );
    pointer-events: none;
}

/* Payment System Cards */
.payment-system-card {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.payment-system-card:last-child {
    margin-bottom: 0;
}

.payment-system-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.payment-system-card-label {
    display: block;
    padding: 24px 20px;
    border: 2px solid rgba(141, 92, 255, 0.2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.05), rgba(167, 139, 250, 0.1));
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.payment-system-card-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
}

.payment-system-card:hover .payment-system-card-label::before {
    left: 100%;
}

.payment-system-card:hover .payment-system-card-label {
    border-color: rgba(141, 92, 255, 0.5);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.3);
    transform: translateY(-2px);
}

.payment-system-card input[type="radio"]:checked + .payment-system-card-label {
    border-color: #8d5cff;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.15), rgba(181, 101, 255, 0.2));
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.4);
}

.payment-system-card input[type="radio"]:checked + .payment-system-card-label::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: #8d5cff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    animation: pulse-check 0.3s ease;
}

@keyframes pulse-check {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.payment-system-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.payment-system-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.payment-system-title {
    font-size: 18px;
    font-weight: 700;
    color: #e0e0e0;
    margin: 0;
}

.payment-system-description {
    color: #b7c8ff;
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

.payment-system-features {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.feature-chip {
    background: rgba(141, 92, 255, 0.1);
    color: #b565ff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(141, 92, 255, 0.2);
}

/* Specific payment system styles */
.payment-system-card[data-system="yoomoney"] .payment-system-icon {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(141, 92, 255, 0.1));
    color: #333;
    box-shadow: 0 4px 15px rgb(149 85 226);
}

.payment-system-card[data-system="yoomoney"] input[type="radio"]:checked + .payment-system-card-label {
    background: linear-gradient(135deg, rgba(34,177,76,0.15), rgba(110, 86, 207, 0.2));
    border-color: #22B14C;
    box-shadow: 0 8px 25px rgba(34,177,76,0.4);
}


.payment-system-card[data-system="robokassa"] .payment-system-icon {
    background: linear-gradient(135deg, #22B14C, #1a8d3a);
    color: white;
    box-shadow: 0 4px 15px rgba(34,177,76,0.3);
}

.payment-system-card[data-system="robokassa"] input[type="radio"]:checked + .payment-system-card-label {
    background: linear-gradient(135deg, rgba(34,177,76,0.15), rgba(110, 86, 207, 0.2));
    border-color: #22B14C;
    box-shadow: 0 8px 25px rgba(34,177,76,0.4);
}

/* Right side styling */
.balance-form-section {

    padding: 24px;

}

.balance-form-section .form-label {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.balance-form-section .form-control {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(141, 92, 255, 0.3) !important;
    color: #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
}

.balance-form-section .form-control:focus {
    border-color: #8d5cff !important;
    box-shadow: 0 0 0 0.2rem rgba(141, 92, 255, 0.25) !important;
}

.balance-form-section .form-control::placeholder {
    color: #a0a0a0 !important;
}

/* Quick amount buttons */
.quick-amount-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.quick-amount {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(167, 139, 250, 0.2));
    border: 1px solid rgba(141, 92, 255, 0.3);
    color: #e0e0e0;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
}

.quick-amount:hover {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.2), rgba(181, 101, 255, 0.3));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(141, 92, 255, 0.3);
}

.quick-amount:active {
    transform: translateY(0);
}

/* Pay button */
.pay-button-section {
    margin-top: auto;
}

.pay-button {
    width: 100%;
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    border: none;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.4);
}

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

.pay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(141, 92, 255, 0.6);
}

.pay-button:active::before,
.pay-button:focus::before {
    width: 300px;
    height: 300px;
}

.pay-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.3);
}

.pay-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #a78bfa, #c084fc);
}

/* Agreement section */
.agreement-section {
    background: rgba(141, 92, 255, 0.05);
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.agreement-section .form-check-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(141, 92, 255, 0.3);
}

.agreement-section .form-check-input:checked {
    background-color: #8d5cff;
    border-color: #8d5cff;
}

.agreement-section .form-check-label {
    color: #b7c8ff;
    font-size: 13px;
    line-height: 1.4;
}

.agreement-section .form-check-label a {
    color: #8d5cff;
    text-decoration: none;
}

.agreement-section .form-check-label a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .balance-modal-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .balance-modal-left,
    .balance-modal-right {
        order: 1;
    }

    .balance-modal-right {
        order: 2;
    }

    .quick-amount-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Stats container */
.stats-container {
    position: relative;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    position: relative;
}

.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(141, 92, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(20, 10, 40, 0.3);
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(20, 10, 40, 0.4);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(110, 86, 207, 0.08) 100%);
}

.stat-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.stat-icon-wrapper {
    position: relative;
}

.stat-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(20, 10, 40, 0.4);
}

.stat-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover .stat-glow {
    opacity: 1;
}

.stat-content {
    text-align: center;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fdf7ff;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.stat-label {
    font-size: 0.9rem;
    color: rgb(255 255 255);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}


.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.5s;
    transform: translate(-50%, -50%);
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 80px 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }
}

@media (min-width: 992px) {
    .col-lg-8 {
        flex: 0 0 auto;
        width: 56.666667%;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Отдельные блоки превью баннера и аватара */
.banner-preview-block,
.avatar-preview-block {
    width: 100%;
    max-width: 600px;
    margin-bottom: 30px;
}

/* Каждый элемент превью */
.preview-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Заголовки для превью элементов */
.preview-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 5px;
}

/* Контейнер превью баннера - РАЗМЕР 600x400 */
.banner-preview {
    width: 600px;
    height: 400px;
    background-size: 100%; /* ПОЛНЫЙ размер без background-size cover */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    border: 3px solid rgba(141, 92, 255, 0.4);
    box-shadow: 0 0 30px rgba(141, 92, 255, 0.5);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 60px; /* Отступ перед аватаркой */
    position: relative;
    margin: 0 auto; /* Центрирование */
}

.banner-preview:hover {
    border-color: rgba(141, 92, 255, 0.5);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.3);
    transform: scale(1.01); /* Легкое масштабирование */
}

.banner-preview:empty::before {
    content: 'Баннер не загружен';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(141, 92, 255, 0.5);
    font-size: 16px;
    font-weight: 500;
}

/* Отдельный блок для баннера с полной видимостью */
.banner-preview-block {
    margin-bottom: 50px; /* Дополнительное пространство */
    position: relative;
}

/* Аватарка в своем блоке */
.avatar-preview-block {
    margin-top: 10px;
}

/* Контейнер превью аватарки */
.avatar-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.05), rgba(167, 139, 250, 0.1));
    border-radius: 12px;
    border: 2px solid rgba(141, 92, 255, 0.3);
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.avatar-preview-container:hover {
    border-color: rgba(141, 92, 255, 0.5);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.3);
    transform: scale(1.02);
}

/* Аватарка в превью */
.avatar-image-preview {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.avatar-preview-container:hover .avatar-image-preview {
    transform: scale(1.05);
}

.avatar-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* Увеличенная аватарка как в профиле */
.avatar-preview-large {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(141, 92, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.avatar-preview-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.avatar-preview-large:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(141, 92, 255, 0.6);
}

/* Онлайн-индикатор для большой аватарки */
.online-indicator-large {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: #5ed39d;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px rgba(94, 211, 157, 0.7);
    transition: all 0.3s ease;
}

.online-indicator-large:not(.online) {
    display: none;
}

/* Индикатор онлайн в превью аватарки */
.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background-color: #d96f6f;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 4px rgba(217, 111, 111, 0.6);
    transition: all 0.3s ease;
}

.online-indicator.online {
    background-color: #5ed39d;
    box-shadow: 0 0 6px rgba(94, 211, 157, 0.6);
}

/* Game title with icon */
.game-title {
    display: flex;
    align-items: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text);
    background: linear-gradient(45deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.game-title img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* === СТИЛИ КАРТОЧКИ СЕРВЕРА MOON - ПРЕМИУМ ДИЗАЙН === */
.server-card-moon {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1) 0%, rgba(181, 101, 255, 0.08) 100%);
    border: 1px solid rgba(141, 92, 255, 0.3);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(20, 10, 40, 0.2);
    position: relative;
    margin-bottom: 1rem;
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.server-card-moon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(141, 92, 255, 0.01));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.server-card-moon:hover::before {
    opacity: 1;
}

.server-card-moon:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.5);
}

/* Header карточки */
.server-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.2), rgba(181, 101, 255, 0.3));
    position: relative;
}

.server-badge {
    display: flex;
    align-items: center;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    backdrop-filter: blur(10px);
    animation: status-pulse 2s ease-in-out infinite;
}

.status-indicator.online {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.8), rgba(39, 174, 96, 0.9));
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

.status-indicator.offline {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.8), rgba(192, 57, 43, 0.9));
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.game-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.3), rgba(181, 101, 255, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 3px 12px rgba(141, 92, 255, 0.4);
    transition: transform 0.3s ease;
}

.server-card-moon:hover .game-icon-wrapper {
    transform: rotate(360deg) scale(1.1);
}

/* Body карточки */
.server-card-body {
    padding: 1.2rem 1.2rem;
    position: relative;
}

.server-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.8rem;
    line-height: 1.2;
    background: linear-gradient(45deg, #8d5cff, #b565ff, #6c30cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #90a4f9;
    background-clip: text;
    word-break: break-word;
}

.game-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    opacity: 0.8;
}

/* Grid статистики */
.server-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(141, 92, 255, 0.05);
    border: 1px solid rgba(141, 92, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 40px;
}

.stat-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.1), transparent);
    transition: left 0.5s;
}

.stat-row:hover::before {
    left: 100%;
}

.stat-row:hover {
    background: rgba(141, 92, 255, 0.08);
    border-color: rgba(141, 92, 255, 0.2);
    transform: translateX(2px);
}

.stat-row i {
    width: 18px;
    text-align: center;
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.stat-value {
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
    flex: 1;
    word-break: break-all;
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Actions */
.server-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(141, 92, 255, 0.1);
}

.btn-moon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.btn-moon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.5s;
    transform: translate(-50%, -50%);
}

.btn-moon:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: white;
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.6);
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.2), rgba(108, 117, 125, 0.3));
    color: var(--text);
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.4), rgba(108, 117, 125, 0.5));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
}

/* Адаптивность */
@media (max-width: 768px) {
    .server-card-moon {
        margin-bottom: 1rem;
    }

    .server-card-header {
        padding: 1rem;
    }

    .server-card-body {
        padding: 1rem;
    }

    .server-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .status-indicator {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

@keyframes status-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* === КАСТОМНАЯ СЕТКА БЕЗ BOOTSTRAP - MOON THEME === */
.moon-grid, .server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .moon-grid, .server-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .moon-grid, .server-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* === Сервер листер - Moon Theme Container === */
.server-list-container {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.03), rgba(181, 101, 255, 0.02));
    border: 1px solid rgba(141, 92, 255, 0.1);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(20, 10, 40, 0.1);
    position: relative;
    overflow: hidden;
}

.server-list-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(141, 92, 255, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(181, 101, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.moon-grid-item, .server-grid-item {
    display: flex;
    flex-direction: column;
}

/* Moon Grid для серверов с улучшенной сеткой */
.moon-grid, .server-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

@media (max-width: 768px) {
    .moon-grid, .server-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .moon-grid, .server-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* === Стили выбора игр в servers/add.php === */
.games-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.game-selection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.05), rgba(167, 139, 250, 0.1));
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.1);
    backdrop-filter: blur(10px);
}

.game-selection-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.4);
}

.game-icon {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(141, 92, 255, 0.3);
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(141, 92, 255, 0.2);
}

.game-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.game-selection-card:hover .game-icon img {
    transform: scale(1.05);
}

.game-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

.game-selection-card:hover .game-name {
    color: var(--primary);
}

.server-add-instruction {
    background: rgba(141, 92, 255, 0.1) !important;
    border: 1px solid rgba(141, 92, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.server-add-instruction h6 {
    color: var(--primary) !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
}

.server-add-instruction ul {
    color: var(--text-secondary) !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    font-size: 0.95rem !important;
}

.server-add-instruction li {
    margin-bottom: 0.25rem;
}

.gm-form input[type="number"] {
    color: var(--text);
    background: #130d2333;
    border: 1px solid #442d76;
    border-radius: 10px;
    padding: 12px 14px;
}

.gm-form input[type="number"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.2);
}

/* Responsive для выбора игр */
@media (max-width: 576px) {
    .games-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .game-selection-card {
        padding: 1rem 0.75rem;
    }

    .game-icon {
        width: 60px;
        height: 60px;
    }
}

/* === Стили для управления серверами - Moon Theme === */
.servers-header {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.2), rgba(181, 101, 255, 0.3));
    border-bottom: 2px solid rgba(141, 92, 255, 0.5);
    color: var(--text);
    padding: 4rem 0;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.servers-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(141, 92, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(181, 101, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.servers-header .display-4 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.servers-header .fas.fa-server {
    color: var(--primary);
    animation: float 3s ease-in-out infinite;
}

.servers-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(141, 92, 255, 0.3);
    backdrop-filter: blur(10px);
}

.stat-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: block;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.server-card-my {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.05), rgba(167, 139, 250, 0.1));
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(20, 10, 40, 0.2);
    position: relative;
}

.server-card-my::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(141, 92, 255, 0.01));
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.server-card-my:hover::before {
    opacity: 1;
}

.server-card-my:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.5);
}

.server-header {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.3), rgba(181, 101, 255, 0.4));
    color: var(--text);
    padding: 1.5rem;
    position: relative;
    border-bottom: 1px solid rgba(141, 92, 255, 0.3);
}

.server-header i.fas {
    color: var(--primary);
    margin-right: 0.5rem;
}

.server-header h5 {
    color: var(--text);
    font-weight: 700;
    margin: 0;
    font-size: 1.1rem;
}

.server-status {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: status-pulse 2s ease-in-out infinite;
}

.server-status.online {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.8), rgba(39, 174, 96, 0.9));
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

.server-status.offline {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.8), rgba(192, 57, 43, 0.9));
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

@keyframes status-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.server-content-my {
    padding: 1rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    position: relative !important;
}

/* Компактная версия информации сервера */
.compact-server-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.server-name-compact {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    margin-bottom: 0.25rem !important;
}

.server-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.375rem !important;
}

.detail-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
    padding: 0.2rem 0 !important;
}

.detail-item i {
    width: 16px !important;
    color: var(--primary) !important;
    font-size: 0.9rem !important;
    text-align: center !important;
}

.detail-text {
    font-weight: 500 !important;
    flex: 1 !important;
}

.server-actions-compact {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 10 !important;
}

.btn-delete-compact {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.btn-delete-compact:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(238, 90, 36, 0.4) !important;
}

.btn-delete-compact i {
    font-size: 14px !important;
}

.server-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
}

.server-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .server-info {
        grid-template-columns: 1fr 1fr;
    }
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 0.5rem;
    background: rgba(141, 92, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(141, 92, 255, 0.1);
    transition: all 0.3s ease;
}

.info-item:hover {
    background: rgba(141, 92, 255, 0.1);
    border-color: rgba(141, 92, 255, 0.2);
    transform: translateX(3px);
}

.info-item i {
    font-size: 1.1rem;
    color: var(--primary);
    min-width: 20px;
}

.info-item span {
    font-weight: 500;
    line-height: 1.4;
}

.server-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-edit, .btn-delete {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-edit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-edit:hover::before {
    left: 100%;
}

.btn-edit::before {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.8), rgba(181, 101, 255, 0.9));
}

.btn-delete::before {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.8), rgba(238, 90, 36, 0.9));
}

.btn-delete:hover::before {
    left: 100%;
}

.btn-edit {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.2), rgba(181, 101, 255, 0.3));
    color: var(--text);
    border: 2px solid rgba(141, 92, 255, 0.3);
}

.btn-edit:hover {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.4), rgba(181, 101, 255, 0.5));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.4);
    color: white;
}

.btn-edit i {
    margin-right: 0.5rem;
}

.btn-delete {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(238, 90, 36, 0.3));
    color: var(--text);
    border: 2px solid rgba(255, 107, 107, 0.3);
}

.btn-delete:hover {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.4), rgba(238, 90, 36, 0.5));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    color: white;
}

.btn-delete i {
    margin-right: 0.5rem;
}

.no-servers {
    text-align: center;
    padding: 5rem 3rem;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.05), rgba(167, 139, 250, 0.08));
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 20px;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
}

.no-servers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 30%, rgba(141, 92, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.no-servers i {
    font-size: 5rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    animation: float 3s ease-in-out infinite;
}

.no-servers h3 {
    color: var(--text);
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.8rem;
}

.no-servers p {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-add-first {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.2), rgba(181, 101, 255, 0.3));
    border: 2px solid rgba(141, 92, 255, 0.4);
    padding: 1rem 2.5rem;
    border-radius: 15px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-add-first::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.btn-add-first:hover::before {
    left: 100%;
}

.btn-add-first:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(141, 92, 255, 0.4);
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.4), rgba(181, 101, 255, 0.5));
    color: white;
    border-color: rgba(141, 92, 255, 0.6);
}

.btn-add-first i {
    font-size: 1.2rem;
    color: var(--primary);
}

/* === Модальные окна для серверов - Moon Theme === */
.modal-content {
    border: 1px solid rgba(141, 92, 255, 0.3);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(20, 10, 40, 0.4);
}

.modal-header {
    border-bottom: 1px solid rgba(141, 92, 255, 0.2);
    padding: 1.5rem;
    border-radius: 20px 20px 0 0;
}

.modal-header .modal-title {
    color: var(--text);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header .modal-title i {
    color: var(--primary);
}

.modal-body {
    padding: 2rem;
    color: var(--text);
}

.modal-footer {
    border-top: 1px solid rgba(141, 92, 255, 0.2);
    padding: 1.5rem 2rem;
    border-radius: 0 0 20px 20px;
    background: #130d23f0;
}

.modal-footer button {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 0.5rem;
}

.modal-footer .btn-secondary {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.2), rgba(108, 117, 125, 0.3));
    color: var(--text);
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.modal-footer .btn-secondary:hover {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.4), rgba(108, 117, 125, 0.5));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
}

.modal-footer .btn-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(176, 42, 55, 0.9));
    color: white;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

.modal-footer .btn-danger:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9), rgba(176, 42, 55, 1));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.alert {
    border-radius: 12px;
    border: 1px solid rgba(255, 193, 7, 0.3);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    color: #ffeaa7;
    margin-top: 1.5rem;
}

.alert .bi-exclamation-triangle {
    color: #ffc107;
    font-size: 1.25rem;
}

.alert strong {
    color: #ffd700;
    font-weight: 700;
}

/* === Адаптивность для серверов === */
@media (max-width: 768px) {
    .servers-header {
        padding: 3rem 0;
    }

    .servers-header .display-4 {
        font-size: 2.5rem;
    }

    .server-content-my {
        padding: 1.5rem;
    }

    .server-name {
        font-size: 1.2rem;
    }

    .server-info {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .server-actions {
        flex-direction: column;
    }

    .btn-edit, .btn-delete {
        min-width: 100%;
    }

    .modal-dialog {
        margin: 20px auto;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .servers-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .stat-item {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* === Анимация плавающих частиц для серверов === */
@keyframes float-particle {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-10px) translateX(10px) rotate(120deg); }
    66% { transform: translateY(5px) translateX(-5px) rotate(240deg); }
    100% { transform: translateY(0px) translateX(0px) rotate(360deg); }
}

/* === Стили для партнеров - Moon Theme === */
.partners-block {
    position: relative;
    overflow: hidden;
}

.partners-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    pointer-events: none;
    z-index: -1;
}

.partners-slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(320px * 3 + 30px * 2);
    margin: 0 auto;
    max-width: 100%;
}

.slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: flex-start;
}

.partner-item {
    flex: 0 0 320px;
    display: flex;
    justify-content: center;
}

.partner-card {
    flex: 0 0 320px;
    position: relative;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.08), rgba(181, 101, 255, 0.05));
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 24px;
    padding: 80px 1.5rem 2rem 1.5rem;
    text-align: center;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(141, 92, 255, 0.01));
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.partner-card:hover::before {
    opacity: 1;
}

.partner-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 40px rgba(141, 92, 255, 0.25);
    border-color: rgba(141, 92, 255, 0.4);
}

.partner-logo-wrapper {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(141, 92, 255, 0.4);
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(181, 101, 255, 0.2));
    z-index: 10;
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.3);
    transition: all 0.3s ease;
}

.partner-card:hover .partner-logo-wrapper {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 12px 35px rgba(141, 92, 255, 0.5);
}

.partner-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.partner-card:hover .partner-logo-wrapper img {
    transform: scale(1.05) rotate(5deg);
}

.partner-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 8px;
    color: var(--text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.partner-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.partner-servers {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.partner-card.expanded .partner-servers {
    opacity: 1;
    max-height: 500px;
}

.server {
    margin-bottom: 12px;
}

.server-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.server-progress {
    height: 8px;
    background: rgba(141, 92, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(141, 92, 255, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.server-progress-fill {
    height: 100%;
    width: 0;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.server-progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(141, 92, 255, 0.5));
    animation: fill-shine 2s ease-in-out infinite alternate;
}

@keyframes fill-shine {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.become-partner-wrapper {
    margin-top: 30px;
    text-align: center;
}

.become-partner {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.become-partner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(141, 92, 255, 0.5);
}

.become-partner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.become-partner:active::before {
    width: 300px;
    height: 300px;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.2), rgba(181, 101, 255, 0.3));
    color: var(--text);
    border: 1px solid rgba(141, 92, 255, 0.3);
    font-size: 1.5rem;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.slider-btn:hover {
    background: rgba(141, 92, 255, 0.4);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.3);
}

.slider-btn.left {
    left: -60px;
}

.slider-btn.right {
    right: -60px;
}

/* Адаптивность для партнеров */
@media (max-width: 1200px) {
    .partners-slider-wrapper {
        width: calc(280px * 2 + 30px);
    }

    .slider-track {
        gap: 30px;
    }

    .partner-item {
        flex: 0 0 280px;
    }

    .partner-card {
        flex: 0 0 280px;
        padding: 60px 1rem 1.5rem 1rem;
    }

    .partner-logo-wrapper {
        width: 80px;
        height: 80px;
        top: -40px;
    }

    .partner-logo-wrapper img {
        width: 80px;
        height: 80px;
    }

    .slider-btn.left {
        left: -40px;
    }

    .slider-btn.right {
        right: -40px;
    }
}

@media (max-width: 768px) {
    .partners-slider-wrapper {
        width: 320px;
    }

    .partner-item {
        flex: 0 0 320px;
    }

    .partner-card {
        flex: 0 0 320px;
    }

    .slider-btn {
        display: none;
    }
}

.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(-45deg, #0d1220, #1a1428, #0d1220, #241b33);
    background-size: 400% 400%;
    animation: bg-shift-moon 20s ease infinite;
    opacity: 0.05;
}

@keyframes bg-shift-moon {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* -------------------------------
   EASYMDE FULL MOON THEME
   styled to match .card, .input etc.
-------------------------------- */

/* Контейнер */
.EasyMDEContainer {
    background: var(--card, rgba(27,29,40,0.6));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

/* Панель инструментов */
.EasyMDEContainer .editor-toolbar {
    background: var(--card, rgb(39 25 73)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 6px;
}

.EasyMDEContainer .editor-toolbar button {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--text, #e6e6e6) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    margin-right: 4px !important;
    transition: 0.15s ease;
}

.EasyMDEContainer .editor-toolbar button:hover {
    background: rgba(255,255,255,0.1) !important;
}

.EasyMDEContainer .editor-toolbar button.active,
.EasyMDEContainer .editor-toolbar button:active {
    background: linear-gradient(90deg,#8d5cff,#b565ff) !important;
    color: #fff !important;
    border-color: rgba(141,92,255,0.3) !important;
    box-shadow: 0 0 10px rgba(141,92,255,0.25) !important;
}

.EasyMDEContainer .editor-toolbar i.separator {
    color: rgba(255,255,255,0.12) !important;
}

/* CodeMirror едитор */
.CodeMirror {
    background: #22183c !important;
    color: var(--text, #e6e6e6) !important;
    border-radius: 0 0 12px 12px !important;
}

/* Текст курсора */
.CodeMirror-cursor {
    border-left: 2px solid #b565ff !important;
}

/* Markdown подсветка */
.cm-strong { color: #cba6ff !important; }        /* Bold */
.cm-em { color: #a6e3a1 !important; }            /* Italic */
.cm-link { color: #89b4fa !important; }          /* Links */
.cm-header { color: #f5c2e7 !important; }        /* # Header text */

/* Скроллбар */
.CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
    background: #0f1117 !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar {
    width: 6px;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}

.form-control:disabled {
    background-color: #22183c !important;
    opacity: 1 !important;
}
/* Preview */
.editor-preview,
.editor-preview-side {
    background: #271949 !important;
    color: var(--text) !important;
    padding: 20px !important;
}

.editor-preview h1, .editor-preview h2, .editor-preview h3 {
    color: #fff !important;
}

/* ============================
   Main Info Block Custom Styles
   Moon Theme
===============================*/

.card {
    border: 1px solid rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 12px;
}

.border-left-accent {
  border-left: 4px solid #8d5cff !important;
}

.card .card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text, #e6e6e6);
    margin-bottom: 18px;
    text-align: center;
}

/* === Раскрывающаяся группа (как dropdown) === */
.tag-group {
  border: 1px solid #8d5cff;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(141,92,255,0.15);
}

.tag-group-header,
.tag-group-header::-webkit-details-marker {
  list-style: none;
}

.tag-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #22183c;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #dde1ff;
  cursor: pointer;
  transition: 0.2s;
}

.tag-group-body {
  padding: 14px 16px;
  animation: dropdownFade 0.25s ease;
}

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

.tag-chip {
  background: #22183c;
  color: #dde1ff;
  border: 1px solid #8d5cff;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 600;
  transition: 0.2s;
}

.tag-chip.checked {
  background: #8d5cff;
  color: #fff;
  box-shadow: 0 0 14px rgba(141,92,255,0.35);
}

.tag-group-body .checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.groups-dropdown {
  width: 100%;
  border-radius: 12px;
  margin-top: 6px;
  box-shadow: 0 0 12px rgba(141,92,255,0.15);
  overflow: hidden;
  border: 1px solid rgba(141, 92, 255, 0.2);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);
}

.groups-dropdown-summary {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #dde1ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.groups-dropdown-body {
  padding: 14px 16px;
  animation: dropdownFade 0.25s ease;
}

.groups-dropdown-body .tag-group {
  margin-bottom: 8px;
}

.category-select-chip {
  display: inline-block;
  width: 100%;
  background: #1b1d28;
  color: #dde1ff;
  border: 1px solid #2e2442;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(141,92,255,0.12);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.category-chip {
  background: #1e2630;
  color: #dde1ff;
  border: 1px solid #8d5cff;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(141,92,255,0.12);
  transition: 0.2s ease;
  cursor: pointer;
}

.category-chip:hover {
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(141,92,255,0.22);
}

input[name="category"]:checked + .category-chip {
  background: #8d5cff;
  color: #fff;
  border-color: rgba(141,92,255,0.6);
  box-shadow: 0 0 14px rgba(141,92,255,0.35);
  transform: scale(1.02);
}

.groups-dropdown[open] summary.category-select-chip {
  box-shadow: 0 0 16px rgba(141,92,255,0.3);
}

.banner-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.banner-main {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(141, 92, 255, 0.2);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);    
}

.banner-card {
  padding: 30px;
}

.banner-title {
  font-size: 1.8em;
  font-weight: 800;
  margin-bottom: 25px;
  color: var(--text);
}

.banner-upload-section {
  margin-bottom: 40px;
}

.banner-upload-label {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text);
}

.banner-upload-input-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.banner-select {
  flex: 1;
  background: #1c1634;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 15px;
  color: var(--text);
  font-size: 14px;
}

.banner-upload-area {
  flex-shrink: 0;
}

.banner-upload-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary, #7a3cff);
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.banner-upload-btn:hover {
  background: var(--primary-dark, #5a2aff);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(122, 60, 255, 0.4);
}

.banner-upload-btn i {
  font-size: 1.2em;
}

.banner-upload-info {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.banner-preview-section {
  margin-bottom: 30px;
}

.banner-preview-label {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text);
}

.banner-preview {
  width: 100%;
  height: 200px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.banner-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-align: center;
  background: var(--accent-bg);
}

.banner-preview-placeholder i {
  font-size: 3em;
  margin-bottom: 10px;
  opacity: 0.5;
}

.banner-controls-group {
  background: var(--accent-bg);
  border-radius: 15px;
  padding: 25px;
}

.banner-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.banner-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner-control label {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.banner-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: var(--border-color);
  outline: none;
  transition: background 0.3s ease;
}

.banner-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary, #7a3cff);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(122, 60, 255, 0.2);
  transition: all 0.2s ease;
}

.banner-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.banner-range-val {
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.banner-reset-btn {
  background: var(--danger, #dc3545);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
}

.banner-reset-btn:hover {
  background: var(--danger-dark, #c82333);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.banner-side {
  position: sticky;
  top: 20px;
}

.banner-current-card {
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.banner-current-title {
  padding: 20px 20px 15px;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-color);
}

.banner-current-img {
  padding: 15px;
}

.banner-current-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.banner-current-info {
  padding: 0 20px 15px;
  color: var(--text-secondary);
  font-size: 14px;
}

.banner-current-placeholder {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.banner-current-placeholder i {
  font-size: 3em;
  margin-bottom: 10px;
  opacity: 0.5;
}

.banner-modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text);
}

.banner-modal-header {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--text);
}

.banner-modal-title {
  color: var(--text);
}

.banner-modal-body {
  padding: 30px;
}

.banner-drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.banner-drop-zone.dragover {
  border-color: var(--primary, #7a3cff);
  background: rgba(122, 60, 255, 0.05);
}

.banner-drop-content i {
  font-size: 4em;
  margin-bottom: 20px;
  color: var(--text-secondary);
}

.banner-drop-content h5 {
  color: var(--text);
  margin-bottom: 10px;
}

.banner-drop-content p {
  color: var(--text-secondary);
}

.btn-link {
  color: var(--primary, #7a3cff);
  text-decoration: none;
}

.btn-link:hover {
  color: var(--primary-dark, #5a2aff);
  text-decoration: underline;
}

.banner-crop-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.banner-crop-container img {
  max-width: 100%;
  height: auto;
}

.banner-crop-overlay {
  position: absolute;
  border: 2px solid var(--primary, #7a3cff);
  background: rgba(122, 60, 255, 0.2);
  pointer-events: none;
  cursor: move;
}

.banner-crop-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.border-right-accent {
  border-left: none !important;
  border-right: 4px solid #8d5cff !important;
}

@media (max-width: 1024px) {
  #reviews-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #reviews-section {
    grid-template-columns: repeat(1, 1fr);
  }
}

.review-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  color: var(--text);
  transition: transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-width: 400px;
  width: 100%;
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.rating {
  font-size: 1.2em;
  color: #ffd700;
}

.date {
  color: var(--text-secondary);
  font-size: 0.9em;
}

.server-name {
  display: block;
  margin-top: 10px;
  color: var(--text-secondary);
  font-style: italic;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 0;
}


.integration-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.integration-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.integration-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.2em;
}

.integration-status {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.btn-integration, .btn-integration-disconnect {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 5px;
  transition: background 0.2s ease;
}

.btn-integration:hover {
  background: var(--primary-dark);
}

.btn-integration-disconnect {
  background: #dc3545;
}

.btn-integration-disconnect:hover {
  background: #c82333;
}

.integrations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  justify-content: center;
}

.integration-card-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  min-width: 120px;
  transition: transform 0.2s ease;
}

.integration-card-profile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.integration-card-profile span {
  font-weight: 600;
  color: var(--text);
}

.btn-save {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background: #7b52ff;
  color: white;
  cursor: pointer;
}

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

/* Server info row alignment - all rows left-aligned */
.info-row {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    align-items: center;
}

/* Votes row aligned to the right */
.votes-row {
    justify-content: flex-end !important;
}

/* Server status display for sidebar */
.server-status-display {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(141, 92, 255, 0.08);
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.status-item:hover {
    background: rgba(141, 92, 255, 0.12);
    border-color: rgba(141, 92, 255, 0.4);
    transform: translateX(2px);
}

.status-label {
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.status-label i {
    color: var(--primary);
    font-size: 1rem;
}

.status-value {
    color: var(--text);
    font-weight: 700;
    font-size: 0.85rem;
}

.status-value code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.8rem;
}

/* Text gradient */
.text-gradient {
    background: linear-gradient(45deg, #8d5cff, #b565ff, #6c30cc);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 46px;
    animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.highlight-word {
    position: relative;
    color: #fdf7ff;
}

.highlight-word::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #8d5cff, #b565ff, #6c30cc);
    border-radius: 1px;
    animation: highlight-glow 2s ease-in-out infinite alternate;
}

@keyframes highlight-glow {
    0% { box-shadow: 0 0 3px rgba(141, 92, 255, 0.5); }
    100% { box-shadow: 0 0 15px rgba(141, 92, 255, 0.8), 0 0 25px rgba(181, 101, 255, 0.3); }
}

/* Animation classes */
.animate-fade-in { animation: fadeIn 1s ease-out; }
.animate-slide-up { animation: slideUp 0.8s ease-out; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-bounce-gentle { animation: bounceGentle 2s ease-in-out infinite; }
.animate-pulse-gentle { animation: pulseGentle 2s ease-in-out infinite; }

.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }

/* Modal avatar for user modal */
.modal-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(141, 92, 255, 0.5);
    box-shadow: 0 0 20px rgba(141, 92, 255, 0.3);
    margin-bottom: 20px;
    margin: 0 auto;
    display: block;
}

/* User modal links */
.modal-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.modal-link {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text);
    text-decoration: none;
    padding: 12px 15px;
    background: rgba(141, 92, 255, 0.1);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.modal-link:hover {
    background: rgba(141, 92, 255, 0.25);
    color: var(--text);
}

/* Override Bootstrap modal for right side */
.modal-dialog-end {
    margin: 1.75rem auto 1.75rem 1.75rem;
}

@media (max-width: 768px) {
    .modal-dialog-end {
        margin: 1.75rem auto;
        transform: none;
    }
    .modal-dialog-end .modal-content {
        width: 90vw;
    }
}

/* User Right Panel */
#userRightPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#userRightPanel.open {
    opacity: 1;
    visibility: visible;
}

#userPanelContent {
    position: absolute;
    top: 0;
    right: 0;
    width: min(350px, 90vw);
    height: 100vh;
    background: #130d23eb;
    border-left: 1px solid rgba(141,92,255,0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px 0 0 10px;
    box-shadow: -5px 0 20px rgba(0,0,0,0.3);
    z-index: 10001;
    overflow-y: auto;
}

#userPanelClose {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(141, 92, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

#userPanelClose:hover {
    background: rgba(141, 92, 255, 0.3);
}

#userPanelClose:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.5);
}

#userRightPanel.open #userPanelContent {
    transform: translateX(0);
}

/* Адаптивность для #userPanelContent */
@media (max-width: 768px) {
    #userPanelContent {
        width: 280px;
        padding: 30px 15px;
    }

    .user-panel-avatar {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }

    .user-panel-id {
        font-size: 16px;
    }

    .user-panel-username {
        font-size: 18px;
    }

    .user-panel-balance {
        padding: 12px 16px;
    }

    .user-panel-menu {
        gap: 12px;
    }

    .user-panel-link {
        padding: 12px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    #userPanelContent {
        width: 250px;
        padding: 25px 12px;
    }

    .user-panel-avatar {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }

    .user-panel-id {
        font-size: 14px;
    }

    .user-panel-username {
        font-size: 16px;
    }

    .user-panel-balance {
        padding: 10px 14px;
        font-size: 14px;
    }
}

#userPanelOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9998;
    cursor: pointer;
}

#userRightPanel.open #userPanelOverlay {
    opacity: 1;
}

.user-panel-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

.user-panel-id {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.user-panel-username {
    color: rgba(141, 92, 255, 0.8);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.user-panel-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: rgba(141, 92, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(141, 92, 255, 0.3);
    transition: all 0.3s ease;
    animation: balanceGlow 2s ease-in-out infinite alternate;
}

.user-panel-balance:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(141, 92, 255, 0.4);
}

.balance-amount {
    font-size: 18px;
    font-weight: 600;
    color: rgba(253, 247, 255, 0.9);
    text-align: center;
}

.plus-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.4);
}

.plus-btn:hover {
    transform: scale(1.1) rotate(360deg);
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.6);
}

.plus-btn i {
    font-size: 14px;
}

@keyframes balanceGlow {
    0% {
        box-shadow: 0 0 10px rgba(141, 92, 255, 0.2);
        border-color: rgba(141, 92, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 20px rgba(141, 92, 255, 0.4);
        border-color: rgba(141, 92, 255, 0.4);
    }
}

.user-panel-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-bottom: 30px;
}

.user-panel-link {
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgba(253, 247, 255, 0.9);
    text-decoration: none;
    padding: 15px 20px;
    background: rgba(141, 92, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
    font-size: 16px;
    border: 1px solid rgba(141, 92, 255, 0.2);
}

.user-panel-link:hover {
    background: rgba(141, 92, 255, 0.25);
    color: #fff;
    transform: translateX(-5px);
    box-shadow: 0 10px 25px rgba(141, 92, 255, 0.3);
}

.user-panel-link i {
    width: 20px;
    text-align: center;
}

.user-panel-link.logout-link {
    background: rgba(220, 53, 69, 0.1);
    color: #ff6b6b;
    border-color: rgba(220, 53, 69, 0.2);
}

.user-panel-link.logout-link:hover {
    background: rgba(220, 53, 69, 0.25);
    color: #fff;
    transform: translateX(-5px);
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
}

@media (max-width: 768px) {
    #userPanelContent {
        width: 300px;
        padding: 30px 20px;
    }
}

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

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

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

@keyframes bounceGentle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulseGentle {
    0%, 100% { box-shadow: 0 0 0 0 rgba(141, 92, 255, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(141, 92, 255, 0); }
}

/* Stats container */
.stats-container {
    position: relative;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    position: relative;
}

.stat-card {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(141, 92, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(20, 10, 40, 0.3);
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(20, 10, 40, 0.4);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(110, 86, 207, 0.08) 100%);
}

.stat-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.stat-icon-wrapper {
    position: relative;
}

.stat-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(20, 10, 40, 0.4);
}

.stat-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover .stat-glow {
    opacity: 1;
}

.stat-content {
    text-align: center;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fdf7ff;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(253, 247, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
    opacity: 1;
}

.scroll-mouse {
    width: 24px;
    height: 36px;
    border: 2px solid rgba(253, 247, 255, 0.3);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: rgba(253, 247, 255, 0.5);
    border-radius: 2px;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2s ease-in-out infinite;
}

@keyframes scroll-wheel {
    0% { opacity: 0; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(16px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(32px); }
}

.scroll-arrows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.scroll-arrows span {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid rgba(253, 247, 255, 0.3);
    animation: scroll-arrows 2s ease-in-out infinite;
}

.scroll-arrows span:nth-child(2) { animation-delay: 0.2s; }
.scroll-arrows span:nth-child(3) { animation-delay: 0.4s; }

@keyframes scroll-arrows {
    0%, 100% { opacity: 0; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(10px); }
}

/* Button animations */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.5s;
    transform: translate(-50%, -50%);
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

/* Responsive upgrades */
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Progressive section reveal styles */
/* Styles from includes/index.php */
.section-reveal {
    transition: all 0.8s ease;
}

.section-hidden {
    opacity: 0;
    transform: translateY(50px);
    pointer-events: none;
}

.section-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.reveal-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    transition: background 0.3s ease;
}

.reveal-btn:hover {
    background: var(--primary-dark);
}

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== OPTIMIZED SERVER EDIT PAGE - MOON THEME ===== */

/* Clean container with lightweight glassmorphism */
.page-wrapper .container {
    margin: 30px auto;
    position: relative;
}

/* Clean gradient title */
.page-wrapper h1 {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    margin: 0 0 15px 0;
}

/* Optimized cards with minimal effects */
.page-wrapper .card,
.page-wrapper .card-modern {
    background: rgba(32, 39, 57, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(141, 92, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(20, 10, 40, 0.15);
    margin-bottom: 20px;
    transition: all 0.2s ease;
}

.page-wrapper .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.2);
    border-color: rgba(141, 92, 255, 0.35);
}

/* Clean navigation tabs */
.page-wrapper .nav-tabs {
    background: rgba(141, 92, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    overflow: visible;
}

.page-wrapper .nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    position: relative;
    transform: none !important;
}

.page-wrapper .nav-tabs .nav-link:hover {
    background: rgba(141, 92, 255, 0.1);
    color: var(--text);
}

.page-wrapper .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.5);
}

/* Enhanced form controls */
.page-wrapper .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(141, 92, 255, 0.3);
    border-radius: 14px;
    color: var(--text);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    box-shadow:
        0 4px 12px rgba(141, 92, 255, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.page-wrapper .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #8d5cff;
    box-shadow:
        0 0 0 0.2rem rgba(141, 92, 255, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        0 8px 16px rgba(141, 92, 255, 0.15);
    transform: translateY(-2px);
}

.page-wrapper .form-label {
    color: var(--text);
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 15;
}

.page-wrapper .form-label::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 1px;
}

/* Modern button styling */
.page-wrapper .btn {
    border-radius: 14px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

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

.page-wrapper .btn:hover::before {
    width: 400px;
    height: 400px;
}

.page-wrapper .btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.page-wrapper .btn-primary {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: white;
    border-color: rgba(141, 92, 255, 0.5);
    box-shadow: 0 8px 20px rgba(141, 92, 255, 0.3);
}

.page-wrapper .btn-primary:hover {
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    border-color: rgba(141, 92, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(141, 92, 255, 0.4);
}

/* Alert styling */
.page-wrapper .alert {
    border-radius: 16px;
    border: 2px solid rgba(46, 204, 113, 0.4);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.05));
    color: #acffbf;
    backdrop-filter: blur(12px);
    box-shadow:
        0 6px 16px rgba(46, 204, 113, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Badge enhancements */
.page-wrapper .badge {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: white;
    border-radius: 12px;
    font-weight: 700;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 8px rgba(141, 92, 255, 0.2);
}

/* List group enhancement */
.page-wrapper .list-group-item {
    background: rgba(141, 92, 255, 0.05);
    border: 1px solid rgba(141, 92, 255, 0.2);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.page-wrapper .list-group-item:hover {
    background: rgba(141, 92, 255, 0.1);
    transform: translateX(4px);
    border-color: rgba(141, 92, 255, 0.4);
}

/* Chart containers styling */
.page-wrapper .chart-container {
    background: rgba(20, 26, 42, 0.8);
    border-radius: 16px;
    border: 2px solid rgba(141, 92, 255, 0.2);
    backdrop-filter: blur(12px);
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow:
        0 8px 24px rgba(20, 10, 40, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Banner upload area enhancement */
.page-wrapper .border-left-accent {
    border-left: 4px solid linear-gradient(180deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 4px 12px rgba(141, 92, 255, 0.1);
}

/* Responsive enhancements for server edit */
@media (max-width: 1200px) {
    .page-wrapper .container {
        margin: 20px auto;
        border-radius: 20px;
    }

    .page-wrapper h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .page-wrapper .container {
        margin: 10px auto;
        padding: 1.5rem;
        border-radius: 16px;
    }

    .page-wrapper h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .page-wrapper .nav-tabs .nav-link {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
}

/* ===== SERVER PAGE STYLES - Moon Theme ===== */

/* Server Wrapper */
.server-wrapper {
    padding: 2rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* Banner */
.server-banner {
    height: 200px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    filter: brightness(100%) contrast(100%) saturate(100%) blur(0px);
    box-shadow: 0 12px 40px rgba(141, 92, 255, 0.3);
    transition: all 0.4s ease;
}

.server-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.7), rgba(20, 10, 40, 0.9));
    z-index: 1;
}

.server-banner-title {
    position: absolute;
    bottom: 24px;
    left: 28px;
    z-index: 2;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 30px rgba(141, 92, 255, 0.5);
    letter-spacing: -0.5px;
}

.server-banner-badge {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.15), rgba(181, 101, 255, 0.08));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(141, 92, 255, 0.3);
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 15px rgba(141, 92, 255, 0.2);
}

/* Layout */
.row-modern {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.col-main {
    flex: 1 1 720px;
    min-width: 320px;
}

.col-side {
    width: 360px;
    min-width: 280px;
}

/* Cards */
.card-modern {
    padding: 24px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px rgba(20, 10, 40, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    border: 1px solid rgba(141, 92, 255, 0.2);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);    
}

.card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.02), rgba(181, 101, 255, 0.01));
    z-index: -1;
}

.card-modern:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 60px rgba(141, 92, 255, 0.4);
    border-color: rgba(141, 92, 255, 0.5);
}

.card-modern h3 {
    margin: 0 0 20px 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    position: relative;
}

.card-modern h3 i {
    font-size: 1.2em;
    color: var(--primary);
    margin-right: 10px;
}

/* Server Info Grid */
.info-item {
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.05), rgba(181, 101, 255, 0.02));
    border: 1px solid rgba(141, 92, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.info-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.4);
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(181, 101, 255, 0.05));
}

.info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.1), transparent);
    transition: left 0.5s;
}

.info-item:hover::before {
    left: 100%;
}

.info-key {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.info-key i {
    font-size: 1.1rem;
    color: var(--primary);
    width: 18px;
    text-align: center;
}

.info-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    word-break: break-all;
    line-height: 1.3;
}

.vote-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.vote-icon i {
    font-size: 18px;
    color: #ff6b9d;
}

.vote-counter:hover .vote-icon {
    transform: scale(1.2);
}

.vote-count {
    font-weight: 900;
    color: var(--text);
    transition: color 0.3s ease;
}

/* Buttons */
.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

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

.btn-modern:hover::before {
    width: 400px;
    height: 400px;
}

.btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.btn-primary-modern {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: white;
    box-shadow: 0 6px 20px rgba(141, 92, 255, 0.3);
}

.btn-outline-modern {
    background: rgba(141, 92, 255, 0.08);
    color: var(--text);
    border: 1px solid rgba(141, 92, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-outline-modern:hover {
    background: rgba(141, 92, 255, 0.15);
    color: white;
    border-color: rgba(141, 92, 255, 0.5);
}

/* Comments/Reviews */
.comment {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(141, 92, 255, 0.03);
    border: 1px solid rgba(141, 92, 255, 0.1);
    transition: all 0.3s ease;
}

.comment:hover {
    background: rgba(141, 92, 255, 0.08);
    border-color: rgba(141, 92, 255, 0.2);
    transform: translateX(4px);
}

.comment .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(141, 92, 255, 0.3);
    box-shadow: 0 4px 12px rgba(141, 92, 255, 0.2);
}

.comment .meta {
    flex: 1;
}

.comment .username-link {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 4px;
    display: block;
}

.comment .username-link:hover {
    color: var(--primary);
}

.comment .stars {
    margin: 4px 0 8px 0;
    font-size: 14px;
}

.comment .time {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 8px;
}

.comment .review-text {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.review-form .form-control {
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px solid rgba(141, 92, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.review-form .form-control:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(141, 92, 255, 0.2);
}

/* Modal Styles */
.verify-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(141, 92, 255, 0.1);
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(141, 92, 255, 0.2);
    backdrop-filter: blur(10px);
    margin-bottom: 16px;
}

.verify-box span {
    font-weight: 700;
    user-select: all;
    color: var(--text);
}

/* Alert States */
.alert-secondary {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: var(--text-secondary);
    border-radius: 12px;
    padding: 12px 16px;
}

/* Responsive */
@media (max-width: 980px) {
    .col-side {
        width: 100%;
        order: 2;
    }

    .col-main {
        width: 100%;
        order: 1;
    }

    .server-banner-title {
        font-size: 28px;
        left: 20px;
        bottom: 18px;
    }

    .server-banner-badge {
        top: 14px;
        left: 18px;
        padding: 6px 14px;
        font-size: 12px;
    }

    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .row-modern {
        flex-direction: column;
        gap: 20px;
    }

    .col-side {
        width: 100%;
    }

    .server-banner {
        height: 180px;
        margin-bottom: 1.5rem;
    }

    .server-banner-title {
        font-size: 24px;
        bottom: 16px;
        left: 16px;
    }

    .server-banner-badge {
        top: 12px;
        left: 12px;
    }

    .card-modern {
        padding: 20px;
        border-radius: 18px;
    }

    .info-item {
        padding: 14px;
    }

    .btn-modern {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .server-banner {
        height: 150px;
    }

    .server-banner-title {
        font-size: 20px;
    }

    .card-modern h3 {
        font-size: 1.2rem;
    }

    .info-value {
        font-size: 16px;
    }
}

/* Bouncing animation for vote counter */
@keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Action buttons block for side panel */
.action-buttons-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.08), rgba(181, 101, 255, 0.04));
    border: 1px solid rgba(141, 92, 255, 0.15);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(20, 10, 40, 0.2);
    position: relative;
    overflow: hidden;
}

.action-buttons-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.03), transparent);
    transition: left 0.6s;
}

.action-buttons-block:hover::before {
    left: 100%;
}

.action-btn-modern {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 10px;
    min-height: 36px;
    box-shadow: 0 2px 8px rgba(20, 10, 40, 0.15);
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
    border: 1px solid rgba(141, 92, 255, 0.2);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(110, 86, 207, 0.05) 100%);
}

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

/* Точные копии стилей проекта Moon Theme */
.action-btn-modern:hover {
    background: #2a3250 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(141, 92, 255, 0.5) !important;
    color: #8d5cff !important;
}

.action-btn-modern:hover::before {
    width: 25px;
    height: 25px;
}

.action-btn-modern:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 35px rgba(141, 92, 255, 0.4);
}

/* Specific action button variants */
.action-btn-edit {
    background: linear-gradient(135deg, #8d5cff, #b565ff);
    color: white;
    border-color: rgba(141, 92, 255, 0.3);
    font-size: 13px;
    animation: actionGlow 3s ease-in-out infinite alternate;
}

.action-btn-owner {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.15), rgba(181, 101, 255, 0.08));
    color: var(--text);
    border: 2px solid rgba(141, 92, 255, 0.4);
}

.action-btn-favorite {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.1));
    color: #e8f5e8;
    border: 2px solid rgba(46, 204, 113, 0.3);
    position: relative;
}

.action-btn-favorite.empty-fav {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1), rgba(181, 101, 255, 0.05));
    color: var(--text-secondary);
}

.action-btn-favorite.fill-fav {
    background: linear-gradient(135deg, #ff6b9d, #f094fb);
    color: white;
    border-color: rgba(255, 107, 157, 0.5);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.4);
}

.action-btn-share {
    background: linear-gradient(135deg, rgba(255, 199, 0, 0.2), rgba(255, 193, 77, 0.1));
    color: #fff8e1;
    border: 2px solid rgba(255, 199, 0, 0.3);
}

.action-btn-back {
    background: rgba(141, 92, 255, 0.1);
    color: var(--text-secondary);
    border: 2px solid rgba(141, 92, 255, 0.2);
}

@keyframes actionGlow {
    0% { box-shadow: 0 4px 15px rgba(141, 92, 255, 0.3); }
    100% { box-shadow: 0 4px 15px rgba(141, 92, 255, 0.6), 0 0 30px rgba(141, 92, 255, 0.3); }
}

/* ===== SERVER PAGE SPECIFIC STYLES ===== */

/* Server Banner with Custom Filters */
.page-wrapper .server-banner,
.game.server .server-banner {
    height: 170px !important;
    background-size: 100% !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-color: #111 !important;
    image-rendering: crisp-edges !important;
    image-rendering: -webkit-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) !important;
}

/* Bounce Animation for Vote Counter */
@keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Action Button Colors - Server Page Specific */
.page-wrapper .action-btn-edit,
.game.server .action-btn-edit {
    color: #8d5cff !important;
}

.page-wrapper .action-btn-edit:hover,
.game.server .action-btn-edit:hover {
    color: #b565ff !important;
}

.page-wrapper .action-btn-favorite,
.game.server .action-btn-favorite {
    color: #ffc107 !important;
}

.page-wrapper .action-btn-favorite:hover,
.game.server .action-btn-favorite:hover {
    color: #ffda44 !important;
}

.page-wrapper .action-btn-share,
.game.server .action-btn-share {
    color: #198754 !important;
}

.page-wrapper .action-btn-share:hover,
.game.server .action-btn-share:hover {
    color: #20c997 !important;
}

.page-wrapper .action-btn-back,
.game.server .action-btn-back {
    color: #6c757d !important;
}

.page-wrapper .action-btn-back:hover,
.game.server .action-btn-back:hover {
    color: #adb5bd !important;
}

.page-wrapper .action-btn-owner,
.game.server .action-btn-owner {
    color: #dc3545 !important;
}

.page-wrapper .action-btn-owner:hover,
.game.server .action-btn-owner:hover {
    color: #ff6b6b !important;
}

/* Players List - Server Page Specific */
.page-wrapper .players-list,
.game.server .players-list {
    max-height: 300px !important;
    overflow-y: auto !important;
    margin-top: 15px !important;
}

.page-wrapper .players-list::-webkit-scrollbar,
.game.server .players-list::-webkit-scrollbar {
    width: 6px !important;
}

.page-wrapper .players-list::-webkit-scrollbar-thumb,
.game.server .players-list::-webkit-scrollbar-thumb {
    background: rgba(141, 92, 255, 0.3) !important;
    border-radius: 3px !important;
}

.page-wrapper .player-item,
.game.server .player-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    background: rgba(141, 92, 255, 0.05) !important;
    border: 1px solid rgba(141, 92, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.page-wrapper .player-item:hover,
.game.server .player-item:hover {
    background: rgba(141, 92, 255, 0.1) !important;
}

.page-wrapper .player-avatar,
.game.server .player-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.page-wrapper .player-info,
.game.server .player-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.page-wrapper .player-name,
.game.server .player-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #dde1ff !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.page-wrapper .player-time,
.game.server .player-time {
    font-size: 12px !important;
    color: rgba(221, 225, 255, 0.7) !important;
    font-weight: 500 !important;
}

/* Game Info Styles */
.game-info-container {
    margin: 30px 0;
    padding: 0 20px;
}

.game-title-section {
    flex: 1;
    min-width: 250px;
}

.game-main-title {
    color: white;
    font-size: 2.5em;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.game-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.2em;
    font-weight: 300;
}

.game-image-wrapper {
    position: relative;
    flex-shrink: 0;
}

.game-poster {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(141,92,255,0.1) 100%);
    border-radius: 15px;
}

.game-content {
    padding: 40px 30px;
}

.game-description-section {
    margin-bottom: 40px;
}

.section-title {
    color: #ffffff;
    font-size: 1.8em;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #8d5cff;
}

.section-title i {
    color: #8d5cff;
}

.game-intro {
    font-size: 1.1em;
    line-height: 1.6;
    color: #e2e8f0;
    margin-bottom: 15px;
}

.game-details {
    font-size: 1em;
    line-height: 1.6;
    color: #94a3b8;
}

.game-features-section {
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1) 0%, rgba(181, 101, 255, 0.05) 100%);
    border-radius: 10px;
    border-left: 4px solid #8d5cff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(141, 92, 255, 0.2);
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.15) 0%, rgba(181, 101, 255, 0.08) 100%);
}

.feature-icon {
    font-size: 1.5em;
    margin-right: 15px;
    width: 40px;
    text-align: center;
}

.feature-text {
    color: #e2e8f0;
    font-weight: 500;
}

.game-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.1) 0%, rgba(181, 101, 255, 0.05) 100%);
    border-radius: 15px;
    min-width: 120px;
    box-shadow: 0 5px 15px rgba(141, 92, 255, 0.1);
    border: 1px solid rgba(141, 92, 255, 0.2);
}

.stat-number {
    font-size: 1.5em;
    font-weight: 700;
    color: #8d5cff;
    margin-bottom: 5px;
}

.stat-label {
    color: #7f8c8d;
    font-size: 0.9em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .game-header {
        padding: 30px 20px;
        flex-direction: column;
        text-align: center;
    }

    .game-main-title {
        font-size: 2em;
    }

    .game-poster {
        width: 150px;
        height: 210px;
    }

    .game-content {
        padding: 30px 20px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .game-stats {
        gap: 20px;
    }
}

/* Styles for advantages list */
.advantages-list {
    text-align: left;
    padding-left: 20px;
}

.advantages-list li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* =================================================
   HIGHLIGHTED CS2 MONITORING BLOCK
   ================================================= */

.cs2-monitoring-highlight {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.15), rgba(181, 101, 255, 0.08));
    border: 2px solid rgba(141, 92, 255, 0.4);
    border-radius: 16px;
    padding: 24px;
    margin: 30px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(141, 92, 255, 0.2);
    backdrop-filter: blur(10px);
}

.cs2-monitoring-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.05), transparent);
    transition: left 0.8s;
}

.cs2-monitoring-highlight:hover::before {
    left: 100%;
}

.cs2-monitoring-highlight .monitoring-title {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 16px;
    text-align: center;
    background: linear-gradient(45deg, #8d5cff, #b565ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cs2-monitoring-highlight .monitoring-description {
    font-size: 1.1em;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cs2-monitoring-highlight .stats-info {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(141, 92, 255, 0.2);
}

.cs2-monitoring-highlight .stats-info p {
    margin: 0;
    font-size: 1em;
    color: var(--text);
    font-weight: 500;
}

.cs2-monitoring-highlight .stats-info strong {
    color: #8d5cff;
    font-weight: 800;
}

/* Server stats highlight block */
.server-stats-highlight {
    background: linear-gradient(135deg, rgba(141, 92, 255, 0.12), rgba(181, 101, 255, 0.06));
    border: 2px solid rgba(141, 92, 255, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(141, 92, 255, 0.2);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.server-stats-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(141, 92, 255, 0.06), transparent);
    transition: left 0.6s;
}

.server-stats-highlight:hover::before {
    left: 100%;
}

.server-stats-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(141, 92, 255, 0.3);
    border-color: rgba(141, 92, 255, 0.5);
}

.server-stats-highlight .stats-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.server-stats-highlight .stats-info i {
    font-size: 1.5em;
    color: #8d5cff;
    margin-bottom: 8px;
}

.server-stats-highlight .stats-info span {
    font-size: 1em;
    color: var(--text);
    text-align: center;
    line-height: 1.4;
}

.server-stats-highlight .stats-info strong {
    color: #8d5cff;
    font-weight: 800;
}