:root {
    /* Colors */
    --primary: #5f65dc;
    --primary-hover: #7b7ff0;
    --primary-dark: #4a4fb8;
    
    --bg-primary: #0a0a0f;
    --bg-secondary: #13131a;
    --bg-tertiary: #1a1a24;
    --bg-elevated: #20202e;
    
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-tertiary: #6b6b7b;
    
    --success: #4ade80;
    --error: #ef4444;
    --warning: #fbbf24;
    --cyan: #22d3ee;
    
    --border: rgba(95, 101, 220, 0.2);
    --border-hover: rgba(95, 101, 220, 0.4);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Transitions */
    --transition: 0.2s ease;

    /* Sizes */
    --header-height: 60px;
    /* Meat74 project-specific card variables */
    --meat-card-bg: linear-gradient(180deg, #15151a 0%, #101018 100%);
    --meat-card-border: rgba(255, 255, 255, 0.04);
    --meat-card-padding: 20px;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Typography */
h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: 24px;
    font-weight: 600;
    margin: var(--spacing-xl) 0 var(--spacing-md);
    color: var(--text-primary);
}

h3 {
    font-size: 20px;
    font-weight: 600;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    color: var(--text-secondary);
}

p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Section */
.section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* Grid */
.grid {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(95, 101, 220, 0.3);
}

.btn-primary.active {
    background: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(95, 101, 220, 0.2);
    transform: translateY(1px);
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 0 30px rgba(95, 101, 220, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: rgba(95, 101, 220, 0.1);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 18px;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
}

.btn i {
    font-size: 16px;
}

.btn-icon i {
    font-size: 18px;
}

.btn i, .btn .bx {
    display: inline-flex;
    align-items: center;
}

/* Button Color Variants */
.btn-emerald.btn-primary {
    background: #4ade80;
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

.btn-emerald.btn-primary:hover {
    background: #22c55e;
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.5);
    transform: translateY(-2px);
}

.btn-emerald.btn-secondary {
    background: transparent;
    color: #4ade80;
    border: 2px solid #4ade80;
}

.btn-emerald.btn-secondary:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: #22c55e;
    color: #22c55e;
}

.btn-fire.btn-primary {
    background: #ef4444;
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.btn-fire.btn-primary:hover {
    background: #dc2626;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
}

.btn-fire.btn-secondary {
    background: transparent;
    color: #ef4444;
    border: 2px solid #ef4444;
}

.btn-fire.btn-secondary:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
    color: #dc2626;
}

.btn-cyan.btn-primary {
    background: #22d3ee;
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.btn-cyan.btn-primary:hover {
    background: #06b6d4;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.5);
    transform: translateY(-2px);
}

.btn-cyan.btn-secondary {
    background: transparent;
    color: #22d3ee;
    border: 2px solid #22d3ee;
}

.btn-cyan.btn-secondary:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: #06b6d4;
    color: #06b6d4;
}

/* Glass Button (Semi-transparent) */
.btn-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: none;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.btn-glass.btn-primary {
    background: rgba(95, 101, 220, 0.15);
    border: 1px solid rgba(95, 101, 220, 0.3);
    color: var(--primary-hover);
}

.btn-glass.btn-primary:hover {
    background: rgba(95, 101, 220, 0.25);
    border-color: rgba(95, 101, 220, 0.5);
    box-shadow: 0 0 20px rgba(95, 101, 220, 0.2);
}

.btn-glass.btn-emerald {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: var(--success);
}

.btn-glass.btn-emerald:hover {
    background: rgba(74, 222, 128, 0.25);
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

.btn-glass.btn-fire {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--error);
}

.btn-glass.btn-fire:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.btn-glass.btn-cyan {
    background: rgba(34, 211, 238, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: var(--cyan);
}

.btn-glass.btn-cyan:hover {
    background: rgba(34, 211, 238, 0.25);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}

/* Mode card buttons - smaller text */
.feature-card .btn-glass {
    font-size: 13px;
    padding: 10px 18px;
    white-space: nowrap;
}

/* ============================================
   Button Focus States
   ============================================ */

/* Base button focus */
.btn:focus,
.btn:focus-visible {
    outline: none;
}

/* Primary button focus */
.btn-primary:focus,
.btn-primary:focus-visible {
    background: var(--primary-hover);
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.4), 0 0 30px rgba(95, 101, 220, 0.5);
    transform: translateY(-2px);
}

/* Secondary button focus */
.btn-secondary:focus,
.btn-secondary:focus-visible {
    background: rgba(95, 101, 220, 0.1);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.2);
}

/* Ghost button focus */
.btn-ghost:focus,
.btn-ghost:focus-visible {
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.15);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Emerald Primary button focus */
.btn-emerald.btn-primary:focus,
.btn-emerald.btn-primary:focus-visible {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.4), 0 0 30px rgba(74, 222, 128, 0.5);
    transform: translateY(-2px);
}

/* Emerald Secondary button focus */
.btn-emerald.btn-secondary:focus,
.btn-emerald.btn-secondary:focus-visible {
    background: rgba(74, 222, 128, 0.1);
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
}

/* Fire Primary button focus */
.btn-fire.btn-primary:focus,
.btn-fire.btn-primary:focus-visible {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.4), 0 0 30px rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
}

/* Fire Secondary button focus */
.btn-fire.btn-secondary:focus,
.btn-fire.btn-secondary:focus-visible {
    background: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
    color: #dc2626;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

/* Cyan Primary button focus */
.btn-cyan.btn-primary:focus,
.btn-cyan.btn-primary:focus-visible {
    background: #06b6d4;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.4), 0 0 30px rgba(34, 211, 238, 0.5);
    transform: translateY(-2px);
}

/* Cyan Secondary button focus */
.btn-cyan.btn-secondary:focus,
.btn-cyan.btn-secondary:focus-visible {
    background: rgba(34, 211, 238, 0.1);
    border-color: #06b6d4;
    color: #06b6d4;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2);
}

/* Glass button focus */
.btn-glass:focus,
.btn-glass:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Glass Primary button focus */
.btn-glass.btn-primary:focus,
.btn-glass.btn-primary:focus-visible {
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.3), 0 0 20px rgba(95, 101, 220, 0.2);
    background: rgba(95, 101, 220, 0.25);
    border-color: rgba(95, 101, 220, 0.5);
}

/* Glass Emerald button focus */
.btn-glass.btn-emerald:focus,
.btn-glass.btn-emerald:focus-visible {
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.3), 0 0 20px rgba(74, 222, 128, 0.2);
    background: rgba(74, 222, 128, 0.25);
    border-color: rgba(74, 222, 128, 0.5);
}

/* Glass Fire button focus */
.btn-glass.btn-fire:focus,
.btn-glass.btn-fire:focus-visible {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3), 0 0 20px rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Glass Cyan button focus */
.btn-glass.btn-cyan:focus,
.btn-glass.btn-cyan:focus-visible {
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.3), 0 0 20px rgba(34, 211, 238, 0.2);
    background: rgba(34, 211, 238, 0.25);
    border-color: rgba(34, 211, 238, 0.5);
}

/* Glass Ghost button focus */
.btn-glass.btn-ghost:focus,
.btn-glass.btn-ghost:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Glass Secondary button focus */
.btn-glass.btn-secondary:focus,
.btn-glass.btn-secondary:focus-visible {
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.2), 0 0 20px rgba(95, 101, 220, 0.15);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Button with loading state - disable focus */
.btn-loading:focus,
.btn-loading:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Icon button focus */
.btn-icon:focus,
.btn-icon:focus-visible {
    background: var(--bg-tertiary);
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.3);
}

/* Icon button with primary focus */
.btn-icon.btn-primary:focus,
.btn-icon.btn-primary:focus-visible {
    background: var(--primary-hover);
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.4), 0 0 30px rgba(95, 101, 220, 0.5);
}

/* Icon button with secondary focus */
.btn-icon.btn-secondary:focus,
.btn-icon.btn-secondary:focus-visible {
    background: rgba(95, 101, 220, 0.1);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.2);
}

/* Icon button with ghost focus */
.btn-icon.btn-ghost:focus,
.btn-icon.btn-ghost:focus-visible {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: 0 0 0 4px rgba(95, 101, 220, 0.15);
}

/* Checkbox */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.checkbox-input {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    background: var(--bg-tertiary);
}

.checkbox-input:checked + .checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-custom i {
    color: white;
    font-size: 14px;
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition);
}

.checkbox-input:checked + .checkbox-custom i {
    opacity: 1;
    transform: scale(1);
}

.checkbox-label {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Switch */
.switch-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.switch-input {
    display: none;
}

.switch {
    width: 48px;
    height: 24px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 12px;
    position: relative;
    transition: all var(--transition);
}

.switch-input:checked + .switch {
    background: var(--primary);
    border-color: var(--primary);
}

.switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all var(--transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-input:checked + .switch::after {
    left: 26px;
}

.switch-label {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Radio Buttons */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.radio-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.radio-input {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    background: var(--bg-tertiary);
}

.radio-input:checked + .radio-custom {
    border-color: var(--primary);
}

.radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition);
}

.radio-input:checked + .radio-custom::after {
    opacity: 1;
    transform: scale(1);
}

.radio-label {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Toggle Cards */
.toggle-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-sm);
}

.toggle-card-input {
    display: none;
}

.toggle-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.toggle-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.toggle-card-input:checked + .toggle-card {
    background: rgba(95, 101, 220, 0.1);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(95, 101, 220, 0.3);
}

.toggle-card i {
    font-size: 32px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    transition: all var(--transition);
}

.toggle-card-input:checked + .toggle-card i {
    color: var(--primary);
    transform: scale(1.1);
}

.toggle-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.toggle-card-text {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Button with Loader */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading .btn-text {
    opacity: 0;
}

.btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.btn-loading .btn-loader {
    display: block;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    transition: all var(--transition);
}

/* Make long placeholder text truncate with ellipsis */
.form-input,
.form-input::placeholder,
.form-textarea::placeholder {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Cross-browser placeholder truncation */
::-webkit-input-placeholder { white-space: nowrap; text-overflow: ellipsis; }
::-moz-placeholder { white-space: nowrap; text-overflow: ellipsis; }
:-ms-input-placeholder { white-space: nowrap; text-overflow: ellipsis; }
:-moz-placeholder { white-space: nowrap; text-overflow: ellipsis; }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(95, 101, 220, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Search Input Group */
.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-group .form-input {
    padding-right: 60px !important; /* ensure space for the icon button */
}

.search-input-group .form-input:hover {
    border-color: rgba(95, 101, 220, 0.5);
}

.search-input-group .search-btn {
    position: absolute;
    right: 8px;
    width: 36px;
    height: 36px;
    z-index: 3; /* keep button above the input */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(95, 101, 220, 0.15);
    border: 1px solid rgba(95, 101, 220, 0.3);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    color: var(--primary-hover);
    box-shadow: none;
}

.search-input-group .search-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 20px rgba(95, 101, 220, 0.3);
}

.search-input-group .search-btn:active {
    opacity: 0.8;
}

.search-input-group .search-btn i {
    font-size: 20px;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    display: inline !important;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary { background: rgba(95, 101, 220, 0.2); color: var(--primary-hover); }
.badge-success { background: rgba(74, 222, 128, 0.2); color: var(--success); }
.badge-error { background: rgba(239, 68, 68, 0.2); color: var(--error); }
.badge-warning { background: rgba(251, 191, 36, 0.2); color: var(--warning); }
.badge-fire { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-emerald { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.badge-cyan { background: rgba(34, 211, 238, 0.2); color: #22d3ee; }

/* Alert */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid;
}

.alert-info {
    background: rgba(95, 101, 220, 0.1);
    border-color: var(--primary);
    color: var(--text-primary);
}

.alert-success {
    background: rgba(74, 222, 128, 0.1);
    border-color: var(--success);
    color: var(--text-primary);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
    color: var(--text-primary);
}

/* Table */
.table {
    width: 100%;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.table th {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border);
    color: var(--text-primary);
}

.table tr:hover td {
    background: var(--bg-secondary);
}

/* Table Variants */
.table-compact td,
.table-compact th {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
}

.table-striped tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.table-bordered {
    border-collapse: separate;
    border-spacing: 0;
}

.table-bordered td,
.table-bordered th {
    border-right: 1px solid var(--border);
}

.table-bordered td:last-child,
.table-bordered th:last-child {
    border-right: none;
}

.table-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Ban row styles */
.small_us_av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    margin-right: 8px;
    vertical-align: middle;
}

/* Danger - красный (перманентный бан) */
.ban-row-danger {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
    border-left: 1px solid #ef4444;
}

.ban-row-danger:hover {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-secondary) 100%) !important;
}

/* Success - зеленый (активный бан) */
.ban-row-success {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.05) 0%, transparent 100%);
    border-left: 1px solid #4ade80;
}

.ban-row-success:hover {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.1) 0%, var(--bg-secondary) 100%) !important;
}

/* Пустой класс - серый (истекший/временный) */
tr.ban-row[class*="ban-row-"]:not(.ban-row-danger):not(.ban-row-success) {
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.05) 0%, transparent 100%);
    border-left: 1px solid #9ca3af;
}

tr.ban-row[class*="ban-row-"]:not(.ban-row-danger):not(.ban-row-success):hover {
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.1) 0%, var(--bg-secondary) 100%) !important;
}

.modal-td {
    width: 0;
    height: 0;
    padding: 0 !important;
    border-top: none !important;
    color: unset !important;
}

/* Stats Card */
.stats-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--transition);
}

.stats-card:hover {
    transform: translateY(-4px);
}

.stats-card:hover::before {
    opacity: 1;
}

.stats-icon-wrapper {
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}

.stats-icon-wrapper i {
    font-size: 22px;
    transition: all var(--transition);
}

.stats-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    transition: color var(--transition);
}

.stats-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats Card Variants */
.stats-card-primary {
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.08) 0%, var(--bg-secondary) 100%);
    border-color: rgba(95, 101, 220, 0.25);
}

.stats-card-primary .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.2) 0%, rgba(95, 101, 220, 0.1) 100%);
}

.stats-card-primary .stats-icon-wrapper i {
    color: var(--primary);
}

.stats-card-primary .stats-value {
    color: var(--primary);
}

.stats-card-primary:hover {
    border-color: rgba(95, 101, 220, 0.5);
    box-shadow: 0 8px 24px rgba(95, 101, 220, 0.15);
}

.stats-card-primary:hover .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.3) 0%, rgba(95, 101, 220, 0.2) 100%);
    transform: scale(1.05);
}

.stats-card-primary:hover .stats-value {
    color: var(--primary-hover);
}

.stats-card-emerald {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, var(--bg-secondary) 100%);
    border-color: rgba(74, 222, 128, 0.25);
}

.stats-card-emerald .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
}

.stats-card-emerald .stats-icon-wrapper i {
    color: var(--success);
}

.stats-card-emerald .stats-value {
    color: var(--success);
}

.stats-card-emerald:hover {
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 8px 24px rgba(74, 222, 128, 0.15);
}

.stats-card-emerald:hover .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(74, 222, 128, 0.2) 100%);
    transform: scale(1.05);
}

.stats-card-emerald:hover .stats-value {
    color: #4ade80;
}

.stats-card-fire {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-secondary) 100%);
    border-color: rgba(239, 68, 68, 0.25);
}

.stats-card-fire .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
}

.stats-card-fire .stats-icon-wrapper i {
    color: var(--error);
}

.stats-card-fire .stats-value {
    color: var(--error);
}

.stats-card-fire:hover {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15);
}

.stats-card-fire:hover .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(239, 68, 68, 0.2) 100%);
    transform: scale(1.05);
}

.stats-card-fire:hover .stats-value {
    color: #f87171;
}

.stats-card-cyan {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, var(--bg-secondary) 100%);
    border-color: rgba(34, 211, 238, 0.25);
}

.stats-card-cyan .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%);
}

.stats-card-cyan .stats-icon-wrapper i {
    color: var(--cyan);
}

.stats-card-cyan .stats-value {
    color: var(--cyan);
}

.stats-card-cyan:hover {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15);
}

.stats-card-cyan:hover .stats-icon-wrapper {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3) 0%, rgba(34, 211, 238, 0.2) 100%);
    transform: scale(1.05);
}

.stats-card-cyan:hover .stats-value {
    color: #22d3ee;
}

/* Project-specific card alias to avoid generic names */
.meat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition);
    align-items: center;
}

/* Banner Info Page (meat-specific, moved from style.css) */
.banner-info-page {
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 28px 36px;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 19px;
    overflow: hidden;
    border: 1px solid rgba(95, 101, 220, 0.45); /* slightly stronger border */
    /* brighter gradient to match request */
    background: linear-gradient(90deg, #171725 0%, #24182b 100%);
    position: relative;
}

.banner-info-page-title {
    font-weight: 700;
    font-size: 32px;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    margin-bottom: 8px; /* reduced gap between title and description */
}

.banner-info-page-title img {
    width: 32px;
    margin-right: 17px;
}

.banner-info-page-desc {
    margin: 4px 0 18px; /* slightly less above, more below to separate from buttons */
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    max-width: 620px;
    color: var(--text-secondary);
}

.banner-info-page-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px; /* ensure spacing from description */
}

.banner-info-page-btn {
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 500;
    height: 50px;
    line-height: 15px;
    font-size: 16px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .2s ease 0s;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.03);
}

.banner-info-page-btn--primary {
    background: linear-gradient(90deg, var(--primary), var(--primary-hover));
    color: #fff;
    border-color: rgba(255,255,255,0.04);
}

.banner-info-page-btn:hover {
    filter: brightness(1.05);
}

.banner-info-page-img {
    position: absolute;
    width: 350px;
    right: 20px;
    top: -150px;
    opacity: 0.75;
    pointer-events: none;
}

/* Horizontal/split variant: content left, visual right */
.banner-info-page--split {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 28px 36px;
}

.banner-info-page-content {
    flex: 1 1 60%;
}

.banner-info-page-visual {
    flex: 0 0 36%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-info-top {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px; /* background for tab group */
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.02);
}

.server-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 14px;
    margin-top: var(--spacing-sm);
}

/* Demo spacing */
.demo-item {
    margin-bottom: var(--spacing-md);
}

.color-swatch {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.color-box {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.color-info {
    flex: 1;
}

.color-name {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.color-value {
    font-family: monospace;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* Character Banners */
.banner {
    position: relative;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    transition: all var(--transition);
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.05), transparent 60%);
    pointer-events: none;
}

.banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(95, 101, 220, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.banner:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.banner-content {
    position: relative;
    z-index: 2;
    max-width: 55%;
}

.banner-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    line-height: 1.2;
}

.banner-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.banner-character {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 45%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    pointer-events: none;
    opacity: 0.4;
    transition: all var(--transition);
    filter: grayscale(20%);
}

.banner:hover .banner-character {
    opacity: 0.5;
    transform: scale(1.02);
}

/* Banner Variants */
.banner-vip {
    background: linear-gradient(135deg, #13131a 0%, #1a1424 100%);
}

.banner-vip:hover {
    box-shadow: 0 5px 20px -5px rgba(95, 101, 220, 0.15),
                0 8px 32px -8px rgba(95, 101, 220, 0.2);
}

.banner-vip::before {
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.08), transparent 60%);
}

.banner-event {
    background: linear-gradient(135deg, #13131a 0%, #141a1f 100%);
}

.banner-event:hover {
    box-shadow: 0 5px 20px -5px rgba(74, 222, 128, 0.15),
                0 8px 32px -8px rgba(74, 222, 128, 0.2);
}

.banner-event::before {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), transparent 60%);
}

.banner-event::after {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.06) 0%, transparent 70%);
}

.banner-promo {
    background: linear-gradient(135deg, #13131a 0%, #1f1416 100%);
}

.banner-promo:hover {
    box-shadow: 0 5px 20px -5px rgba(239, 68, 68, 0.15),
                0 8px 32px -8px rgba(239, 68, 68, 0.2);
}

.banner-promo::before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), transparent 60%);
}

.banner-promo::after {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.06) 0%, transparent 70%);
}

.pages-banner {
    height: 300px;
}

/* Simple Banner (without character) */
.banner-simple {
    min-height: 200px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}

.banner-simple:hover {
    box-shadow: 0 5px 20px -5px rgba(95, 101, 220, 0.1),
                0 8px 32px -8px rgba(95, 101, 220, 0.15);
}

.banner-simple .banner-content {
    max-width: 100%;
    text-align: center;
    width: 100%;
}

.banner .btn {
    box-shadow: none;
}

.banner-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.banner-characters img {
    position: absolute;
    height: 500px;
    top: -240px;
    z-index: 1;
}

.banner-characters img {
    position: absolute;
    height: 500px;
    top: -270px;
}

img.banner-character--left {
    left: 0;
}

img.banner-character--right {
    right: 0;
    height: 450px;
    right: -50px;
    top: -250px;
}

/* Feature Cards */
.feature-card {
    position: relative;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all var(--transition);
}

.feature-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 15, 0.6) 50%, rgba(10, 10, 15, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background-image: url('../img/meatui/backgroundlogo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.15;
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
}

.feature-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.feature-card:hover::after {
    opacity: 1;
}

.feature-card-character {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    pointer-events: none;
    transition: all var(--transition);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

.feature-card-character img {
    height: 100%;
    width: auto;
}

.feature-card:hover .feature-card-character {
    transform: translateX(-50%) translateY(-10px) scale(1.08);
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
}

.feature-card-content {
    position: relative;
    z-index: 3;
    margin-top: auto;
}

.feature-card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.feature-card:hover .feature-card-title {
    color: var(--text-primary);
}

.feature-card-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    transition: all 0.3s ease;
    max-height: 50px;
    overflow: hidden;
}

.feature-card:hover .feature-card-text {
    color: var(--text-primary);
}

.feature-card .btn {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover .btn {
    transform: scale(1.05);
}

/* Feature Card Variants */
.feature-card-primary {
    background: linear-gradient(180deg, #13131a 0%, #1a1424 100%);
    border-color: rgba(95, 101, 220, 0.3);
}


.pagination {
  margin: 5px 0;
  padding: 10px;
  display: flex;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 7px
}

.pagination li {
  display: flex;
  height: 40px;
  width: 40px;
  background: var(--bg-secondary);
  border : 1px solid var(--border);
  border-radius: 4px;
  font-weight: 600;
  transition: .3s;
  color: #c7c7c7;
  font-size: 12px;
  cursor: pointer;
  justify-content: center;
  align-items: center
}

.pagination li.active {
  background: var(--primary);
  font-weight: 700;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: default;
  -webkit-user-drag: none;
  user-select: none
}

.pagination li.disabled {
  background: var(--bg-elevated);
  pointer-events: none
}

.pagination svg {
  width: 12px;
  height: 12px;
  fill: #ffaa50
}

.pagination li:hover {
  background: var(--primary);
  color: #fff;
  opacity: 1;
  border-radius: 4px;
  transition: .3s
}

.pagination li a {
  color: #c7c7c7;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Users / User card styles */
.card-users-columns {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .card-users-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .card-users-columns { grid-template-columns: repeat(4, 1fr); }
}

.user-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.03);
    min-height: 200px;
    transition: all var(--transition);
}

.user-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-card-avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
}

.user-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.user-card-info {
    flex: 1 1 auto;
    min-width: 0;
}

.user-card-name {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 4px;
    transition: all var(--transition);
}

.user-card-name:hover {
    color: var(--primary-hover);
}

.user-card-group {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
}

.user-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

.user-card-action-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.user-card-action-btn i {
    font-size: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

.user-card-action-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.user-card-action-btn:hover i {
    color: var(--primary-hover);
}

.user-card-action-btn--danger i {
    color: var(--error);
}

.user-card-action-btn--danger:hover {
    border-color: rgba(239, 68, 68, 0.3);
}

.user-card-action-btn--danger:hover i {
    color: #dc2626;
}

/* Header adjustments for users page */
.card-user-header {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 12px;
}

.card-user-header .search { flex: 1 1 auto; min-width: 0; }
.card-user-header .search .form-input { width: 100%; }
.card-user-header .search-groups { flex: 0 0 220px; }

/* Container for search + groups select to match meatui card look */
.search-groups {
    background: var(--search-bg);
    border-radius: 15px;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 6px; /* keep inner controls aligned */
}

/* Style select inside search-groups to match meatui inputs */
.search-groups select,
.search-groups .form-select {
    width: 100%;
    padding: 10px 40px 10px 14px; /* room on the right for the arrow */
    height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23a0a0b0' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
}

.search-groups select:focus,
.search-groups .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(95,101,220,0.08);
}

.feature-card-primary:hover {
    border-color: rgba(95, 101, 220, 0.6);
    box-shadow: 0 10px 40px -10px rgba(95, 101, 220, 0.15),
                0 20px 60px -15px rgba(95, 101, 220, 0.2);
}

.feature-card-primary::before {
    background-image: url('../img/meatui/backgroundlogo.png');
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(42%) sepia(76%) saturate(1345%) hue-rotate(223deg) brightness(95%) contrast(88%);
}

.feature-card-primary .feature-card-character::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(95, 101, 220, 0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    transition: all 0.4s ease;
}

.feature-card-primary:hover .feature-card-character::before {
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(95, 101, 220, 0.5) 0%, rgba(95, 101, 220, 0.2) 50%, transparent 70%);
    filter: blur(60px);
}

.feature-card-emerald {
    background: linear-gradient(180deg, #13131a 0%, #141a1f 100%);
    border-color: rgba(74, 222, 128, 0.3);
}

.feature-card-emerald:hover {
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 10px 40px -10px rgba(74, 222, 128, 0.15),
                0 20px 60px -15px rgba(74, 222, 128, 0.2);
}

.feature-card-emerald::before {
    background-image: url('../img/meatui/backgroundlogo.png');
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(77%) sepia(26%) saturate(1648%) hue-rotate(88deg) brightness(98%) contrast(87%);
}

.feature-card-emerald .feature-card-character::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    transition: all 0.4s ease;
}

.feature-card-emerald:hover .feature-card-character::before {
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.5) 0%, rgba(74, 222, 128, 0.2) 50%, transparent 70%);
    filter: blur(60px);
}

.feature-card-fire {
    background: linear-gradient(180deg, #13131a 0%, #1f1416 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.feature-card-fire:hover {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 10px 40px -10px rgba(239, 68, 68, 0.15),
                0 20px 60px -15px rgba(239, 68, 68, 0.2);
}

.feature-card-fire::before {
    background-image: url('../img/meatui/backgroundlogo.png');
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(2515%) hue-rotate(343deg) brightness(95%) contrast(90%);
}

.feature-card-fire .feature-card-character::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    transition: all 0.4s ease;
}

.feature-card-fire:hover .feature-card-character::before {
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.5) 0%, rgba(239, 68, 68, 0.2) 50%, transparent 70%);
    filter: blur(60px);
}

.feature-card-cyan {
    background: linear-gradient(180deg, #13131a 0%, #141f1f 100%);
    border-color: rgba(34, 211, 238, 0.3);
}

.feature-card-cyan:hover {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 10px 40px -10px rgba(34, 211, 238, 0.15),
                0 20px 60px -15px rgba(34, 211, 238, 0.2);
}

.feature-card-cyan::before {
    background-image: url('../img/meatui/backgroundlogo.png');
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(77%) sepia(56%) saturate(1648%) hue-rotate(148deg) brightness(98%) contrast(87%);
}

.feature-card-cyan .feature-card-character::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    transition: all 0.4s ease;
}

.feature-card-cyan:hover .feature-card-character::before {
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.5) 0%, rgba(34, 211, 238, 0.2) 50%, transparent 70%);
    filter: blur(60px);
}

/* Hero Cards */
.hero-card {
    position: relative;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    overflow: hidden;
    height: 350px;
    display: flex;
    align-items: center;
    gap: 64px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-image: url('../img/meatui/backgroundlogo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.12;
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
}

.hero-card:hover {
    transform: translateY(-6px);
}

.hero-card-visual {
    position: relative;
    flex: 0 0 35%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

.hero-card-character {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    height: 200%;
    width: max-content;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card-character img {
    height: 100%;
    width: auto;
    display: block;
}

.hero-card:hover .hero-card-character {
    transform: translateX(-50%) scale(1.05);
}

.hero-card-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.hero-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.hero-card-badge i {
    font-size: 12px;
}

.hero-card:hover .hero-card-badge {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateX(4px);
}

.hero-card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    line-height: 1.2;
    transition: all 0.3s ease;
}

.hero-card:hover .hero-card-title {
    transform: translateX(6px);
    letter-spacing: 0.5px;
}

.hero-card-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    max-width: 95%;
    transition: all 0.3s ease;
}

.hero-card:hover .hero-card-text {
    color: var(--text-primary);
    transform: translateX(4px);
}

.hero-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.hero-card .btn {
    padding: 12px 24px;
    font-size: 14px;
    min-width: 120px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card:hover .btn-primary {
    transform: scale(1.05);
}

.hero-card:hover .btn-secondary {
    transform: scale(1.05);
}

/* Hero Card Small (уменьшенная версия) */
.hero-card-small {
    height: 175px;
    padding: var(--spacing-md) var(--spacing-lg);
    gap: 32px;
}

.hero-card-small .hero-card-character {
    top: -75px;
}

.hero-card-small .hero-card-badge {
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    margin-bottom: 6px;
}

.hero-card-small .hero-card-badge i {
    font-size: 10px;
}

.hero-card-small .hero-card-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.hero-card-small .hero-card-text {
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.hero-card-small .btn {
    padding: 8px 16px;
    font-size: 12px;
    min-width: 100px;
}

/* Hero Card Variants */
.hero-card-primary {
    background: linear-gradient(90deg, #13131a 0%, #1a1424 100%);
    border-color: rgba(95, 101, 220, 0.4);
    border-width: 2px;
}

.hero-card-primary:hover {
    box-shadow: 0 15px 50px -15px rgba(95, 101, 220, 0.2),
                0 25px 70px -20px rgba(95, 101, 220, 0.25);
}

.hero-card-primary::before {
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(42%) sepia(76%) saturate(1345%) hue-rotate(223deg) brightness(95%) contrast(88%);
}

.hero-card-primary .hero-card-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(95, 101, 220, 0.25) 0%, rgba(95, 101, 220, 0.08) 50%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    transition: all 0.4s ease;
}

.hero-card-primary:hover .hero-card-visual::before {
    width: 90%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(95, 101, 220, 0.35) 0%, rgba(95, 101, 220, 0.12) 50%, transparent 70%);
    filter: blur(50px);
}

.hero-card-primary .hero-card-badge {
    color: var(--primary-hover);
    border-color: rgba(95, 101, 220, 0.4);
    background: rgba(95, 101, 220, 0.15);
}

.hero-card-primary .hero-card-character {
    filter: drop-shadow(-10px 30px 30px rgba(95, 101, 220, 0.5));
}

.hero-card-primary:hover .hero-card-character {
    filter: drop-shadow(0 25px 60px rgba(95, 101, 220, 0.6));
}

.hero-card-emerald {
    background: linear-gradient(90deg, #13131a 0%, #141a1f 100%);
    border-color: rgba(74, 222, 128, 0.4);
    border-width: 2px;
}

.hero-card-emerald:hover {
    box-shadow: 0 15px 50px -15px rgba(74, 222, 128, 0.2),
                0 25px 70px -20px rgba(74, 222, 128, 0.25);
}

.hero-card-emerald::before {
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(77%) sepia(26%) saturate(1648%) hue-rotate(88deg) brightness(98%) contrast(87%);
}

.hero-card-emerald .hero-card-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.25) 0%, rgba(74, 222, 128, 0.08) 50%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    transition: all 0.4s ease;
}

.hero-card-emerald:hover .hero-card-visual::before {
    width: 90%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.35) 0%, rgba(74, 222, 128, 0.12) 50%, transparent 70%);
    filter: blur(50px);
}

.hero-card-emerald .hero-card-badge {
    color: var(--success);
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.15);
}

.hero-card-emerald .hero-card-character {
    filter: drop-shadow(-10px 30px 30px rgba(74, 222, 128, 0.5));
}

.hero-card-emerald:hover .hero-card-character {
    filter: drop-shadow(0 25px 60px rgba(74, 222, 128, 0.6));
}

.hero-card-fire {
    background: linear-gradient(90deg, #13131a 0%, #1f1416 100%);
    border-color: rgba(239, 68, 68, 0.4);
    border-width: 2px;
}

.hero-card-fire:hover {
    box-shadow: 0 15px 50px -15px rgba(239, 68, 68, 0.2),
                0 25px 70px -20px rgba(239, 68, 68, 0.25);
}

.hero-card-fire::before {
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(2515%) hue-rotate(343deg) brightness(95%) contrast(90%);
}

.hero-card-fire .hero-card-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.08) 50%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    transition: all 0.4s ease;
}

.hero-card-fire:hover .hero-card-visual::before {
    width: 90%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.35) 0%, rgba(239, 68, 68, 0.12) 50%, transparent 70%);
    filter: blur(50px);
}

.hero-card-fire .hero-card-badge {
    color: var(--error);
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.15);
}

.hero-card-fire .hero-card-character {
    filter: drop-shadow(-10px 30px 30px rgba(239, 68, 68, 0.5));
}

.hero-card-fire:hover .hero-card-character {
    filter: drop-shadow(0 25px 60px rgba(239, 68, 68, 0.6));
}

.hero-card-cyan {
    background: linear-gradient(90deg, #13131a 0%, #141f1f 100%);
    border-color: rgba(34, 211, 238, 0.4);
    border-width: 2px;
}

.hero-card-cyan:hover {
    box-shadow: 0 15px 50px -15px rgba(34, 211, 238, 0.2),
                0 25px 70px -20px rgba(34, 211, 238, 0.25);
}

.hero-card-cyan::before {
    opacity: 0.18;
    filter: brightness(0) saturate(100%) invert(77%) sepia(56%) saturate(1648%) hue-rotate(148deg) brightness(98%) contrast(87%);
}

.hero-card-cyan .hero-card-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0.08) 50%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    transition: all 0.4s ease;
}

.hero-card-cyan:hover .hero-card-visual::before {
    width: 90%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.35) 0%, rgba(34, 211, 238, 0.12) 50%, transparent 70%);
    filter: blur(50px);
}

.hero-card-cyan .hero-card-badge {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.15);
}

.hero-card-cyan .hero-card-character {
    filter: drop-shadow(-10px 30px 30px rgba(34, 211, 238, 0.5));
}

.hero-card-cyan:hover .hero-card-character {
    filter: drop-shadow(0 25px 60px rgba(34, 211, 238, 0.6));
}

/* Activity Cards (малые карточки) */
.activity-card {
    position: relative;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    overflow: hidden;
    height: 167px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-image: url('../img/meatui/backgroundlogo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.1;
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
}

.activity-card:hover {
    transform: translateY(-4px);
}

.activity-card-character {
    position: absolute;
    top: 0;
    right: -25px;
    height: 100%;
    width: 50%;
    pointer-events: none;
    transition: all 0.3s ease;
}

.activity-card:hover .activity-card-character {
    transform: translateX(-4px) scale(1.05);
}

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

.activity-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
    line-height: 1.2;
}

.activity-card-text {
    font-size: 12px;
    color: #fff;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
    max-width: 60%;
}

.activity-card:hover .activity-card-text {
    color: rgba(220, 220, 230, 1);
}

/* Activity Card Variants */
.activity-card-emerald {
    background: linear-gradient(135deg, #13131a 0%, #141a1f 100%);
    border-color: rgba(74, 222, 128, 0.3);
}

.activity-card-emerald:hover {
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 8px 30px -8px rgba(74, 222, 128, 0.15),
                0 15px 40px -10px rgba(74, 222, 128, 0.2);
}

.activity-card-emerald::before {
    opacity: 0.12;
    filter: brightness(0) saturate(100%) invert(77%) sepia(26%) saturate(1648%) hue-rotate(88deg) brightness(98%) contrast(87%);
}

.activity-card-cyan {
    background: linear-gradient(135deg, #13131a 0%, #141f1f 100%);
    border-color: rgba(34, 211, 238, 0.3);
}

.activity-card-cyan:hover {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 8px 30px -8px rgba(34, 211, 238, 0.15),
                0 15px 40px -10px rgba(34, 211, 238, 0.2);
}

.activity-card-cyan::before {
    opacity: 0.12;
    filter: brightness(0) saturate(100%) invert(77%) sepia(56%) saturate(1648%) hue-rotate(148deg) brightness(98%) contrast(87%);
}


/* LEFT-MENU */

.left-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1101;
    width: 90px;
    height: 100vh;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 0 15px 0;
}

.left-menu-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  width: 70px;
}

.left-menu-item-content .title {
  font-size: 11px;
  max-width: 100%;
  font-weight: 500;
  display: block;
  white-space: break-spaces;
  text-overflow: clip;
  overflow: hidden;
  color: var(--text-100);
}

.left-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - var(--header-height));
    width: 100%;
    border-right: 1px solid var(--border);
    border-radius: 0 0 15px 0;
    padding-top: 10px;
}

.left-menu-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
    width: 100%;
}


.left-menu-logo:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 1px;
    background: var(--bg-elevated);
}


/* LEFT-MENU END */




/* HEADER */

.header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    margin-left: 90px;
    padding: 0 24px;
}

.header::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 50%;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-elevated);
}

.header-start {
    display: flex;
    gap: 25px;
    align-items: center;
}

/* HEADER END */



/* SANTA DELETE NEW YEAR 2026 */

.santa-letter-block {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
}

.snow1 {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    pointer-events: none;
    transition: all var(--transition);
    z-index: 10;
}

/* Снег для режимов - меньше по ширине */
.modes-grid .snow1 {
    top: -12px;
    left: 10px;
    right: 10px;
    width: auto;
}

.modes-grid .snow1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Снег смещается вместе с карточками при hover */
.modes-grid > div,
.grid > div {
    position: relative;
}

.modes-grid > div:hover .snow1,
.grid > div:hover .snow1 {
    transform: translateY(-8px);
}

.snow4 {
    position: absolute;
    right: -20px;
    z-index: 1;
    top: -25px;
    pointer-events: none;
    transition: all var(--transition);
}

.snow5-reverse {
    position: absolute;
    left: -10px;
    top: -30px;
    z-index: 1;
    transform: scaleX(-1);
    pointer-events: none;
    transition: all var(--transition);
}

.snow5 {
    position: absolute;
    top: -20px;
    z-index: 1;
    right: -5px;
    pointer-events: none;
    transition: all var(--transition);
}

/* Снег на banner-simple и activity-card двигается при hover */
div:hover > .snow4,
div:hover > .snow5-reverse,
div:hover > .snow5 {
    transform: translateY(-2px);
}

div:hover > .snow5-reverse {
    transform: scaleX(-1) translateY(-2px);
}

/* Снег внутри activity-card */
.activity-card:hover .snow5 {
    transform: translateY(-4px);
}

/* Снег на hero-card (ежедневный кейс) */
a:hover > .snow4,
a:hover > .snow5-reverse {
    transform: translateY(-2px);
}

a:hover > .snow5-reverse {
    transform: scaleX(-1) translateY(-2px);
}

.hero-card:hover .snow4,
.hero-card:hover .snow5-reverse {
    transform: translateY(-2px);
}

.hero-card:hover .snow5-reverse {
    transform: scaleX(-1) translateY(-2px);
}

/* SANTA DELETE NEW YEAR 2026 END */

/* Server Likes Banner with decorative icons */
.server-likes-banner {
    position: relative;
}

.server-banner-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.08;
}

.server-banner-icons i {
    position: absolute;
    font-size: 24px;
    color: var(--primary);
    animation: float 6s ease-in-out infinite;
}

.server-banner-icons i:nth-child(1) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
    font-size: 28px;
}

.server-banner-icons i:nth-child(2) {
    top: 25%;
    right: 15%;
    animation-delay: 1s;
    font-size: 20px;
    color: #ef4444;
}

.server-banner-icons i:nth-child(3) {
    top: 60%;
    left: 20%;
    animation-delay: 2s;
    font-size: 32px;
    color: #fbbf24;
}

.server-banner-icons i:nth-child(4) {
    bottom: 20%;
    right: 25%;
    animation-delay: 0.5s;
    font-size: 22px;
}

.server-banner-icons i:nth-child(5) {
    top: 50%;
    left: 5%;
    animation-delay: 1.5s;
    font-size: 26px;
    color: #ef4444;
}

.server-banner-icons i:nth-child(6) {
    top: 35%;
    right: 8%;
    animation-delay: 2.5s;
    font-size: 30px;
    color: #4ade80;
}

.server-banner-icons i:nth-child(7) {
    bottom: 30%;
    left: 30%;
    animation-delay: 3s;
    font-size: 18px;
}

.server-banner-icons i:nth-child(8) {
    top: 70%;
    right: 35%;
    animation-delay: 1.8s;
    font-size: 24px;
    color: #ef4444;
}

.server-banner-icons i:nth-child(9) {
    bottom: 15%;
    left: 15%;
    animation-delay: 2.2s;
    font-size: 28px;
    color: #fbbf24;
}

.server-banner-icons i:nth-child(10) {
    top: 40%;
    right: 40%;
    animation-delay: 0.8s;
    font-size: 20px;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.server-likes-banner:hover .server-banner-icons {
    opacity: 0.12;
}

/* MODES SECTION */

.modes-section {
    margin-top: var(--spacing-2xl);
    display: grid;
    grid-template-columns: 1fr;
}

.modes-grid,
.mode-servers-container {
    grid-area: 1 / 1;
    transition: opacity 0.25s ease;
}

.modes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg) var(--spacing-md);
    opacity: 1;
}

.modes-grid.hidden {
    opacity: 0;
    pointer-events: none;
}

.mode-card-clickable {
    cursor: pointer;
}

.mode-online-badge {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-md);
    z-index: 4;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mode-online-badge .status-dot {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #6ee7b7, #10b981, #059669);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6),
                0 0 12px rgba(16, 185, 129, 0.4);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.6),
                    0 0 12px rgba(16, 185, 129, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.8),
                    0 0 16px rgba(16, 185, 129, 0.5),
                    0 0 20px rgba(16, 185, 129, 0.3);
    }
}

.mode-online-badge .online-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.mode-servers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
}

.back-to-modes-btn {
    flex-shrink: 0;
}

.mode-servers-title {
    flex: 1;
}

.mode-servers-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.mode-servers-container {
    opacity: 0;
    pointer-events: none;
}

.mode-servers-container.visible {
    opacity: 1;
    pointer-events: auto;
}

/* MODES SECTION END */

/* ===================================
   MEATUI CHAT SYSTEM
   =================================== */

/* Chat Container (like section) */
.meatui-chat-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition);
}

/* Chat Header */
.meatui-chat-header {
    margin-bottom: 20px;
}

.meatui-chat-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meatui-chat-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--primary);
    transition: all var(--transition);
}

.meatui-chat-header-icon svg {
    width: 20px;
    height: 20px;
}

.meatui-chat-header-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
}

/* Chat Messages Container */
.meatui-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 20px 20px 20px 15px;
    background: transparent !important;
    border-radius: var(--radius-lg);
    height: 65vh;
    margin-right: -5px;
}

/* Custom Scrollbar */
.meatui-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.meatui-chat-messages::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.meatui-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
    transition: all var(--transition);
}

.meatui-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    box-shadow: 0 0 8px rgba(95, 101, 220, 0.4);
}

/* Message - Other Users */
.meatui-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: meatuiMsgSlide 0.3s ease;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Message - My Messages */
.meatui-message-own {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: meatuiMsgSlide 0.3s ease;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    z-index: 1;
}

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

/* Avatar */
.meatui-avatar {
    flex-shrink: 0;
}

.meatui-avatar a {
    display: block;
    position: relative;
}

.meatui-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all var(--transition);
}

.meatui-avatar:hover .meatui-avatar-img {
    border-color: var(--primary);
    transform: scale(1.05);
}

.meatui-message-own .meatui-avatar {
    order: 2;
}

.meatui-message-own .meatui-avatar-img {
    border-color: var(--primary);
}

.meatui-message-own .meatui-avatar:hover .meatui-avatar-img {
    border-color: var(--primary-hover);
}

/* Avatar Frame */
.meatui-avatar-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 56px;
    height: 56px;
}

/* Message Body */
.meatui-message-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meatui-message-own .meatui-message-body {
    align-items: flex-end;
    order: 1;
}

/* Author */
.meatui-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: opacity var(--transition);
}

.meatui-author:hover {
    opacity: 0.8;
}

/* Bubble */
.meatui-bubble {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    padding: 12px 48px 12px 16px;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    transition: all var(--transition);
    word-wrap: break-word;
    width: fit-content;
    max-width: 100%;
}

.meatui-bubble:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
}

.meatui-message-own .meatui-bubble {
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.2), rgba(95, 101, 220, 0.1));
    border: 1px solid rgba(95, 101, 220, 0.3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
    max-width: 70%;
}

.meatui-message-own .meatui-bubble:hover {
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.25), rgba(95, 101, 220, 0.15));
    border-color: rgba(95, 101, 220, 0.5);
}

/* Time */
.meatui-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
    padding-left: 4px;
    opacity: 1;
    transition: all var(--transition);
    align-self: flex-start;
}

.meatui-message-own .meatui-time {
    align-self: flex-end;
    padding-left: 0;
    padding-right: 4px;
}

/* Actions Button */
.meatui-actions-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 8px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.meatui-message:hover .meatui-actions-btn,
.meatui-message-own:hover .meatui-actions-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.meatui-actions-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
    color: var(--primary);
    transform: scale(1.08);
}

.meatui-actions-btn.dropdown-toggle::after {
    display: none;
}

/* Dropdown Menu */
.meatui-dropdown {
    position: absolute !important;
    background: var(--bg-elevated) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    min-width: 180px !important;
    z-index: 10000 !important;
    margin: 0 !important;
}

.meatui-dropdown ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.meatui-dropdown li {
    padding: 0 !important;
    margin: 0 !important;
}

.meatui-dropdown a {
    display: block !important;
    padding: 10px 14px !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.meatui-dropdown a:hover {
    background: var(--bg-tertiary) !important;
    color: var(--primary-hover) !important;
    transform: translateX(2px);
}

.meatui-message:has(.dropdown-menu.show),
.meatui-message-own:has(.dropdown-menu.show),
.meatui-message:has(.meatui-dropdown.show),
.meatui-message-own:has(.meatui-dropdown.show) {
    z-index: 10001 !important;
}

/* Save Button */
.meatui-save-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 16px;
}

.meatui-save-btn:hover {
    background: #22c55e;
    transform: scale(1.05);
}

/* Edit Textarea */
.meatui-edit-area {
    width: 100%;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.meatui-edit-area:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(95, 101, 220, 0.1);
}

/* Snow decoration */
.meatui-snow {
    position: absolute;
    top: -11px;
    left: -7px;
    pointer-events: none;
    z-index: 0;
}

.meatui-snow img {
    width: 60px;
    height: auto;
    opacity: 1;
    user-select: none;
}

/* Chat Input Area */
.meatui-chat-input-wrap {
    margin-top: 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.meatui-chat-input-box {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    padding: 2px;
    overflow: hidden;
}

.meatui-chat-input-box:hover {
    border-color: var(--border-hover);
    box-shadow: 0 0 0 1px var(--border-hover);
}

.meatui-chat-input-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(95, 101, 220, 0.15),
                0 0 20px rgba(95, 101, 220, 0.1);
}

.meatui-chat-input {
    width: 100%;
    min-height: 48px;
    max-height: 75px;
    padding: 12px 90px 12px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    resize: none;
    transition: all var(--transition);
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

.meatui-chat-input:focus {
    outline: none;
}

.meatui-chat-input[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* Emoji Button */
.meatui-chat-emoji {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    line-height: 1;
}

.meatui-chat-emoji:hover {
    color: var(--primary);
    background: var(--bg-elevated);
    border-color: var(--border);
    transform: translateY(-50%) scale(1.05);
}

/* Send Button */
.meatui-chat-send {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(95, 101, 220, 0.2);
}

.meatui-chat-send:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 16px rgba(95, 101, 220, 0.4),
                0 0 24px rgba(95, 101, 220, 0.3);
}

.meatui-chat-send:active {
    transform: translateY(-50%) scale(0.98);
    box-shadow: 0 1px 4px rgba(95, 101, 220, 0.3);
}

/* Mentions */
.meatui-mention {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(95, 101, 220, 0.15);
    border: 1px solid rgba(95, 101, 220, 0.3);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--primary-hover);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition);
}

.meatui-mention:hover {
    background: rgba(95, 101, 220, 0.25);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.meatui-mention-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

/* Mentioned Message Highlight */
.meatui-message-mentioned .meatui-bubble {
    background: rgba(251, 191, 36, 0.1);
    border-left: 4px solid var(--warning);
    border-left-width: 4px;
    padding-left: 12px;
}

/* Chat in Sidebar Adjustments */
.meatui-chat-container #chat {
    background: transparent;
}


.meatui-chat-container .meatui-chat-messages {
    margin-bottom: 16px;
}

.meatui-chat-container .meatui-chat-input-wrap {
    margin-top: 0;
}

/* Utility Classes */
.disp-n {
    display: none !important;
}

/* MEATUI CHAT SYSTEM END */


.page-home-content {
    padding: 30px 30px 30px 100px;
}

.center-content {
    width: 75%;
    margin-left: unset;
}

/* ===================================
   HEADER ELEMENTS
   =================================== */

/* Social Networks Block */
.social_nav {
    border: 1px solid var(--border);
    height: 40px;
    padding: 0 5px;
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    box-shadow: 0 2cap 8px rgba(0, 0, 0, 0.1);
}

.social_nav:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
    box-shadow: 0 4px 12px rgba(95, 101, 220, 0.15);
    transform: translateY(-1px);
}

.social_buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.social_but {
    display: flex;
    height: 28px;
    width: 28px;
    cursor: pointer;
    border-radius: var(--radius-md);
    justify-content: center;
    align-items: center;
    transition: all var(--transition);
    background: rgba(95, 101, 220, 0.1);
    border: 1px solid transparent;
}

.social_but svg {
    width: 16px;
    height: 16px;
    fill: var(--text-secondary);
    transition: all var(--transition);
}

.social_but:hover {
    background: rgba(95, 101, 220, 0.2);
    border-color: var(--border);
    transform: translateY(-2px) scale(1.05);
}

.social_but:hover svg {
    fill: var(--primary-hover);
}

.social_but:active {
    transform: translateY(0) scale(0.98);
}

/* Header Menu Button - uses .btn .btn-glass */
.h-menu {
    gap: 10px;
    padding: 8px 16px;
    height: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.h-menu:hover {
    transform: translateX(-50%);
}

.h-menu:not(.collapsed) {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(95, 101, 220, 0.2);
    background: linear-gradient(135deg, rgba(95, 101, 220, 0.1), rgba(95, 101, 220, 0.05));
}

.h-menu i:nth-child(1) {
    font-size: 18px;
    color: var(--primary);
    transition: all var(--transition);
}

.h-menu i:nth-child(3) {
    color: var(--text-secondary);
    transition: all var(--transition);
}

.h-menu:hover i {
    color: var(--primary-hover);
}

.h-menu span {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

/* Header Online Players - uses .btn .btn-glass */
.header-online {
    height: 40px;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
}

.header-online-indicator {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #6ee7b7, var(--success), #059669);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6),
                0 0 12px rgba(74, 222, 128, 0.4);
    animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.6),
                    0 0 12px rgba(74, 222, 128, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(74, 222, 128, 0.8),
                    0 0 16px rgba(74, 222, 128, 0.5),
                    0 0 20px rgba(74, 222, 128, 0.3);
    }
}

.header-online-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Global Menu */
.gl-menu {
  display: none;
  position: absolute;
  top: var(--header-height);
  left: 0;
  z-index: 1100;
  padding: 24px;
  background: var(--bg-secondary);
  width: 100%;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.gl-menu.open {
  display: block;
}

.gl-menu div.container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: unset;
}

.g-menu__section {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  margin-bottom: 30px;
  min-width: 0;
}

.g-menu__section>h5 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: #ffffff;
  margin-bottom: 16px;
  transition: all var(--transition);
}

/* Игрокам - Primary (Синий/Фиолетовый) */
.g-menu__section:nth-child(1)>h5 {
  background: linear-gradient(135deg, rgba(76, 81, 191, 0.6), rgba(102, 126, 234, 0.6));
  border: 1px solid rgba(102, 126, 234, 0.4);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.g-menu__section:nth-child(1)>h5:hover {
  background: linear-gradient(135deg, rgba(90, 103, 216, 0.7), rgba(124, 58, 237, 0.7));
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
}

/* Магазин - Fire (Оранжевый/Красный) */
.g-menu__section:nth-child(2)>h5 {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(249, 115, 22, 0.6));
  border: 1px solid rgba(251, 146, 60, 0.4);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
}

.g-menu__section:nth-child(2)>h5:hover {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.7), rgba(251, 146, 60, 0.7));
  border-color: rgba(253, 186, 116, 0.6);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
}

/* Остальное - Cyan/Teal (Бирюзовый) */
.g-menu__section:nth-child(3)>h5 {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.6), rgba(20, 184, 166, 0.6));
  border: 1px solid rgba(45, 212, 191, 0.4);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
}

.g-menu__section:nth-child(3)>h5:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.7), rgba(94, 234, 212, 0.7));
  border-color: rgba(153, 246, 228, 0.6);
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.4);
  transform: translateY(-2px);
}

/* Обратная связь - Success (Зелёный) */
.g-menu__section:nth-child(4)>h5 {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.6), rgba(34, 197, 94, 0.6));
  border: 1px solid rgba(74, 222, 128, 0.4);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.g-menu__section:nth-child(4)>h5:hover {
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.7), rgba(134, 239, 172, 0.7));
  border-color: rgba(187, 247, 208, 0.6);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
  transform: translateY(-2px);
}

/* Халява - Warning (Жёлтый/Золотой) */
.g-menu__section:nth-child(5)>h5 {
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.6), rgba(234, 179, 8, 0.6));
  border: 1px solid rgba(250, 204, 21, 0.4);
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2);
}

.g-menu__section:nth-child(5)>h5:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.7), rgba(253, 224, 71, 0.7));
  border-color: rgba(254, 240, 138, 0.6);
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4);
  transform: translateY(-2px);
}

.gl-menu__col-icon i {
  font-size: 20px;
}

.gl-menu__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gl-menu__col-link {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all var(--transition);
  cursor: pointer;
}

.gl-menu__col-link:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.gl-menu__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 20px;
  flex-shrink: 0;
  transition: all var(--transition);
}

/* Игрокам - Primary иконки */
.g-menu__section:nth-child(1) .gl-menu__col-icon {
  background: rgba(76, 81, 191, 0.25);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.g-menu__section:nth-child(1) .gl-menu__col-link:hover .gl-menu__col-icon {
  background: rgba(102, 126, 234, 0.4);
  border-color: rgba(102, 126, 234, 0.5);
  transform: scale(1.05);
}

/* Магазин - Fire иконки */
.g-menu__section:nth-child(2) .gl-menu__col-icon {
  background: rgba(220, 38, 38, 0.25);
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.g-menu__section:nth-child(2) .gl-menu__col-link:hover .gl-menu__col-icon {
  background: rgba(249, 115, 22, 0.4);
  border-color: rgba(249, 115, 22, 0.5);
  transform: scale(1.05);
}

/* Остальное - Cyan иконки */
.g-menu__section:nth-child(3) .gl-menu__col-icon {
  background: rgba(8, 145, 178, 0.25);
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.g-menu__section:nth-child(3) .gl-menu__col-link:hover .gl-menu__col-icon {
  background: rgba(20, 184, 166, 0.4);
  border-color: rgba(20, 184, 166, 0.5);
  transform: scale(1.05);
}

/* Обратная связь - Success иконки */
.g-menu__section:nth-child(4) .gl-menu__col-icon {
  background: rgba(22, 163, 74, 0.25);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.g-menu__section:nth-child(4) .gl-menu__col-link:hover .gl-menu__col-icon {
  background: rgba(34, 197, 94, 0.4);
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.05);
}

/* Халява - Warning иконки */
.g-menu__section:nth-child(5) .gl-menu__col-icon {
  background: rgba(202, 138, 4, 0.25);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.g-menu__section:nth-child(5) .gl-menu__col-link:hover .gl-menu__col-icon {
  background: rgba(234, 179, 8, 0.4);
  border-color: rgba(234, 179, 8, 0.5);
  transform: scale(1.05);
}

.gl-menu__col-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.gl-menu__col-info > span:first-child {
  font-size: 15px;
  font-weight: 600;
  color: #e8e9f3;
  line-height: 1.3;
}

.gl-menu__col-info span {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  line-height: 1.4;
}

.gl-menu__col-link:hover .gl-menu__col-info > span:first-child {
  color: #ffffff;
}

.gl-menu__col-link:hover .gl-menu__col-info span {
  color: #b8b9d4;
}

.gl-menu__col-info>small {
  font-size: 11px;
  color: #8a8a9a;
  line-height: 1.4;
}

#b-shadow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1090;
}

/* Header Actions */
.header-actions {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  height: 100%;
  gap: 10px;
}

.header-profile {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  height: 100%;
  padding: 7px 10px;
  transition: all var(--transition);
}

.header-profile:hover {
  background: var(--bg-elevated);
  transition: all var(--transition);
}

.header-profile svg path {
  transition: all var(--transition);
}

.header-profile:hover svg path {
  stroke: var(--text-secondary);
  transition: all var(--transition);
}

.header-profile img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
}

.dropdown.show-drd .header-profile {
  background: var(--bg-elevated) !important;
}

.dropdown-content-languages {
  display: flex;
  flex-direction: column;
  gap: 5px;
  right: 0 !important;
  left: auto !important;
  min-width: 175px;
  z-index: 10;
  padding: 10px !important;
}

.language-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  transition: all var(--transition);
}

.language-item img {
  height: 18px;
  width: 18px;
  border-radius: 5px;
}

.language-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  transition: all var(--transition);
}

.dropdown.show-drd .btn-language-open {
  background: var(--bg-elevated) !important;
}

.btn-language-open {
  justify-content: center;
  display: flex;
  gap: 10px;
  height: 39px;
  width: 39px;
  cursor: pointer;
  border-radius: 50px;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid transparent;
  background: var(--bg-elevated);
}

.btn-language-open:hover {
  background: var(--bg-elevated);
  border: solid 1px var(--border);
  transition: all var(--transition);
}

.btn-language-open-text {
  position: relative;
  bottom: 1px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
}

.dropdown_language .dropdown-menu_language {
    background-color: var(--bg-elevated);
}


.dropdown_language .select {
  color: #ffffff;
  display: flex;
  position: relative;
  z-index: 1;
  transition: 0.2s;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  border-radius: 5px;
  border: 1px solid #ffffff00;
}

.dropdown_language .select:hover {
  background: var(--new-btn-bg-hover);
  border: solid 1px var(--new-btn-border-hover);
  color: var(--new-btn-color-hover);
  transition: all .3s;
}

.dropdown_language:focus {
  outline: 0;
  border: 0;
}

#selected-lang-image {
  width: 30px;
  border-radius: 5px;
}

.dropdown_language .dropdown-menu_language {
  max-width: 200px;
  min-width: 200px;
  background: var(--dropdown-content-new-bg);
  box-shadow: 0 0 20px var(--box-shadow-custom);
  border: 1px solid var(--border-card-color);
  list-style: none;
  position: absolute;
  z-index: 1100;
  top: 65px;
  border-radius: 15px;
  margin: 0px !important;
  padding: 0px 11px !important;
  display: none;
}

.padding_lang {
  padding: 10px 0px;
}

.dropdown_language .dropdown-menu_language li {
  transition: all .2s ease-in-out;
  cursor: pointer;
  width: -webkit-fill-available;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin: 0px !important;
  padding: 12px;
}

.dropdown_language .dropdown-menu_language li:hover {
  color: var(--dropbtn-new-color-hover);
  background: var(--mini-profile-link-bg);
  transition: all .2s ease-in-out;
}

.flag_img {
  margin-right: 4px;
  width: 21px;
  height: 21px;
  position: relative;
  border-radius: 8px;
  top: -1px;
}

.meatui_balance--plus {
    background: var(--primary);
    border-radius: var(--radius-sm);
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    font-weight: bold;
}

.meatui_meatcoin_btn img {
    width: 20px;
    height: 20px;
}


.miniprofile-dropdown-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.miniprofile-dropdown-avatar {
  margin-bottom: 10px
}

.miniprofile-dropdown-avatar img {
  height: 70px;
  width: 70px;
  border-radius: 50%
}

.miniprofile-dropdown-login {
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 10px
}

.miniprofile-dropdown-settings {
  border: var(--miniprofile-dropdown-settings-border);
  padding: 10px 30px;
  border-radius: 30px;
  color: #fff;
  transition: all .3s
}

.miniprofile-dropdown-settings:hover {
  color: #fff;
  background: var(--miniprofile-dropdown-btn-hover);
  transition: all .3s
}

.miniprofile-dropdown-actions {
  margin-top: 20px
}

.miniprofile-dropdown-btn {
  display: flex;
  padding: 15px 20px;
  background: var(--miniprofile-dropdown-btn);
  border-radius: 50px;
  gap: 15px;
  color: #c9c9c9;
  font-weight: 600;
  transition: all .3s
}

.miniprofile-dropdown-btn:hover {
  color: #fff;
  background: var(--miniprofile-dropdown-btn-hover);
  transition: all .3s
}

.miniprofile-dropdown-actions2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 10px
}

.miniprofile-dropdown-btn-messages {
  display: flex;
  padding: 15px 20px;
  background: var(--miniprofile-dropdown-btn);
  border-radius: 50px 15px 15px 50px;
  gap: 15px;
  color: #c9c9c9;
  font-weight: 600;
  transition: all .3s
}

.miniprofile-dropdown-btn-messages:hover {
  color: #fff;
  background: var(--miniprofile-dropdown-btn-hover);
  transition: all .3s
}

.miniprofile-dropdown-btn-friends {
  display: flex;
  padding: 15px 20px;
  background: var(--miniprofile-dropdown-btn);
  border-radius: 15px 50px 50px 15px;
  gap: 15px;
  color: #c9c9c9;
  font-weight: 600;
  transition: all .3s
}

.miniprofile-dropdown-btn-friends:hover {
  color: #fff;
  background: var(--miniprofile-dropdown-btn-hover);
  transition: all .3s
}

.miniprofile-dropdown-btn-mystores {
  display: flex;
  padding: 15px 20px;
  background: var(--miniprofile-dropdown-btn);
  border-radius: 50px 15px 15px 50px;
  gap: 15px;
  color: #c9c9c9;
  font-weight: 600;
  transition: all .3s
}

.miniprofile-dropdown-btn-mystores:hover {
  color: #fff;
  background: var(--miniprofile-dropdown-btn-hover);
  transition: all .3s
}

.miniprofile-dropdown-btn-notifications {
  display: flex;
  padding: 15px 20px;
  background: var(--miniprofile-dropdown-btn);
  border-radius: 15px 50px 50px 15px;
  gap: 15px;
  color: #c9c9c9;
  font-weight: 600;
  transition: all .3s
}

.miniprofile-dropdown-btn-notifications:hover {
  color: #fff;
  background: var(--miniprofile-dropdown-btn-hover);
  transition: all .3s
}

.dropbtn-new {
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--dropbtn-new-color);
  border: 0;
  font-weight: 500;
  display: flex;
  gap: 7px;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all .3s
}

.dropbtn-new i {
  font-size: 9px
}

.dropbtn-new:hover {
  color: #fff;
  background: #52392794;
  transition: all .3s
}

.dropbtn-new.active_btn {
  background: linear-gradient(.25turn, rgb(250 162 95/.3), #373743);
  color: #faa05f
}

.show-drd {
  transition: all .3s
}

.show-drd .dropbtn-new {
  background: var(--dropbtn-new-active);
  color: var(--dropbtn-new-active-text);
  transition: all .3s
}

@media(min-width: 1080px) {
  .dropbtn {
    display: block;
    background-color: initial;
    color: #e4e4e4;
    padding: 24px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .7px;
    cursor: pointer;
    text-decoration: unset;
    transition: all .3s ease
  }

  .dropbtn.active_btn {
    color: #faa05f;
    box-shadow: inset 0 -2px #faa05f
  }

  .dropbtn.active_btn svg {
    fill: #faa05f
  }

  .dropbtn svg {
    width: 11px;
    height: 11px;
    margin-bottom: 3px;
    fill: #fff;
    transition: all .3s ease
  }

  .dropbtn i {
    color: #fff;
    transition: all .3s ease;
    margin-right: 3px
  }

  .dropbtn:hover,
  .dropdown.show-drd .dropbtn {
    color: #faa05f;
    box-shadow: inset 0 -2px #faa05f;
    transition: all .3s ease
  }

  .dropbtn:hover svg {
    fill: #faa05f;
    transition: all .3s ease
  }

  .dropbtn:hover i,
  .dropbtn:focus i {
    color: #faa05f;
    transition: all .3s ease
  }

  .dropbtn img {
    border-radius: 2px;
    outline: none;
    border: none;
    width: 20px;
    margin-right: 5px
  }

  .dropdown.show-drd .dropbtn svg {
    fill: #faa05f;
    transition: all .3s ease;
    transform: rotateX(180deg);
    position: relative
  }

  .dropdown {
    position: relative;
    display: inline-block;
    transition: all .3s ease
  }

  .dropdown-content-new {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding: 5px;
    top: 70px;
    background: var(--bg-elevated);
    box-shadow: 0 0 20px var(--box-shadow-custom);
    border: 1px solid var(--border);
    border-radius: 15px;
    overflow: auto;
    white-space: nowrap;
    z-index: 99;
    transition: all .3s ease;
    transform-origin: top;
    animation-fill-mode: forwards;
    transform: scale(.7);
    opacity: 0;
    visibility: hidden
  }

  .dropdown-content-new .dropdown-linkk {
    color: #fff;
    padding: 10px 17px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .7px;
    display: block;
    transition: all .3s ease;
    border-radius: 10px;
    position: relative
  }

  .dropdown-content-new .dropdown-linkk:hover {
    background-color: var(--dropdown-linkk-hover);
    transition: all .3s ease
  }

  .dropdown-content-new .dropdown-linkk:hover .submenu_m {
    color: var(--dropdown-linkk-text-hover);
    transition: all .3s ease
  }

  .dropdown-content-new .dropdown-linkk:hover svg {
    fill: var(--dropdown-linkk-text-hover);
    transition: all .3s ease
  }

  .right_dot:after {
    position: absolute;
    right: 15px;
    top: 19px;
    content: '';
    width: 4px;
    height: 4px;
    background-color: #faa05f;
    border-radius: 50%;
    opacity: 0;
    transition: all .3s ease;
    z-index: 999
  }

  .dropdown-content-new .dropdown-linkk:hover .right_dot:after {
    opacity: 1;
    transition: all .3s ease
  }

  .submenu_m {
    transition: all .3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex
  }

  .submenu_m svg {
    width: 12px;
    fill: var(--inactive-text-color);
    margin-right: 10px;
    transition: all .3s ease
  }

  .submenu_m img {
    width: 20px;
    height: auto;
    border-radius: 3px
  }

  .dropdown.show-drd .dropdown-content-new {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition: all .3s ease
  }

  .drpdwn_menu {
    display: flex;
    flex-direction: row;
    gap: 10px
  }

  .header_burger {
    display: none
  }

  .nav_header_menu {
    display: none
  }

  .header_list {
    display: none
  }

  .header_link {
    display: none
  }
}

@media(max-width: 1079px) {
  .drpdwn_menu {
    display: none
  }
}


.dropdown-content-miniprofile {
  right: 0 !important;
  left: auto !important;
  min-width: 300px;
  z-index: 10;
  padding: 15px !important
}

.mini-profile-link {
  background: var(--bg-tertiary);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--mini-profile-link-color);
  padding: 13px 17px;
  text-decoration: none;
  font-size: 11px;
  border-bottom: 1px solid var(--mini-profile-link-border);
  letter-spacing: 1px;
  position: relative;
  justify-content: space-between;
  transition: all .3s
}

.mini-profile-link:hover {
  background: var(--bg-secondary);
  transition: all .3s
}

.mini-profile-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%
}

.mini-profile-info {
  text-transform: initial;
  line-height: 18px;
  flex: 1
}

.mini-profile-info span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500
}

.mini-profile-info p {
  margin-bottom: 0;
  color: #969696
}

.mini-profile-icon i {
  color: #a2a2a2
}

.mini-balance-link {
  background: var(--bg-tertiary);
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--mini-profile-link-color);
  padding: 13px 17px;
  text-decoration: none;
  font-size: 11px;
  overflow: hidden;
  letter-spacing: 1px;
  position: relative;
  justify-content: space-between;
  transition: all .3s
}

.mini-balance-link:hover {
  background: var(--bg-secondary);
  transition: all .3s
}

.mini-balance-info span {
  font-size: 15px;
  font-weight: 500
}

.mini-balance-info p {
  margin-bottom: 0;
  color: var(--span-color)
}

.mini-balance-icon {
  background: var(--bg-secondary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  right: -10px
}

.mini-balance-icon i {
  font-size: 20px;
  color: var(--mini-balance-icon-color)
}

.mini-profile-actions {
  margin-top: 10px
}

.mini-profile-item {
  padding: 7px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 7px;
  color: var(--dropbtn-new-color);
  margin-bottom: 7px;
  text-decoration: none;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  transition: all .3s
}

.mini-profile-item:last-child {
  margin-bottom: 0
}

.mini-profile-item:hover {
  color: var(--dropbtn-new-color-hover);
  background: var(--bg-tertiary);
  transition: all .3s
}

.mini-profile-item-left {
  display: flex;
  align-items: center;
  gap: 12px
}

footer.footernew {
    background-color: var(--bg-secondary);
}

/* Top tabs (banlist / unban / mutelist) */
.banner-info-top .tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    transition: all var(--transition);
    font-size: 14px;
}

.banner-info-top .tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.03);
    transform: translateY(-1px);
}

.banner-info-top .tab--active {
    background: linear-gradient(90deg, var(--primary), var(--primary-hover));
    color: #fff;
    border-color: rgba(255,255,255,0.04);
    box-shadow: 0 6px 20px rgba(95, 101, 220, 0.12);
}

/* Make top tabs look like connected tab group */
.banner-info-top { padding-bottom: 4px; }

/* Decorative icon layer for banlist banner (copy of server-banner-icons pattern, higher density) */
.banner-info-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.9; /* increased for visibility */
    z-index: 1; /* sit above background but below content */
    transition: all 0.3s ease-in-out;
}

.banner-info-icons i {
    position: absolute;
    font-size: 24px;
    color: rgba(255,255,255,0.16);
    animation: float 6s ease-in-out infinite;
    text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.banner-info-icons i:nth-child(1) { top: 22%; left: 30%; animation-delay: 0s; font-size: 36px; color: rgba(95,101,220,0.26); }
.banner-info-icons i:nth-child(2) { top: 24%; right: 30%; animation-delay: 0.8s; font-size: 30px; color: rgba(239,68,68,0.24); }
.banner-info-icons i:nth-child(3) { top: 34%; left: 38%; animation-delay: 1.4s; font-size: 34px; color: rgba(74,222,128,0.24); }
.banner-info-icons i:nth-child(4) { bottom: 28%; right: 34%; animation-delay: 0.4s; font-size: 26px; color: rgba(34,211,238,0.20); }
.banner-info-icons i:nth-child(5) { top: 44%; left: 28%; animation-delay: 1.8s; font-size: 34px; color: rgba(255,255,255,0.20); }
.banner-info-icons i:nth-child(6) { top: 40%; right: 24%; animation-delay: 2.6s; font-size: 40px; color: rgba(95,101,220,0.22); }
.banner-info-icons i:nth-child(7) { bottom: 36%; left: 36%; animation-delay: 3s; font-size: 24px; color: rgba(239,68,68,0.18); }
.banner-info-icons i:nth-child(8) { top: 58%; right: 32%; animation-delay: 1.8s; font-size: 32px; color: rgba(74,222,128,0.18); }
.banner-info-icons i:nth-child(9) { bottom: 32%; left: 34%; animation-delay: 2.2s; font-size: 36px; color: rgba(34,211,238,0.18); }
.banner-info-icons i:nth-child(10){ top: 42%; right: 36%; animation-delay: 0.8s; font-size: 26px; color: rgba(255,255,255,0.16); }

.banner-info-page:hover .banner-info-icons { opacity: 0.26; }

/* ensure content sits above icons */
.banner-info-page-content { position: relative; z-index: 2; }

/* Slightly adjust banner image sizing for characters coming from feature_cards */
.banner-info-page-img { right: 8px; opacity: 0.98; z-index: 1; }

.card-server-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 70vh;
  overflow: auto;
}

.card-server-content a {
  line-height: 20px;
  min-height: 50px;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-right: 30px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  align-items: center;
  border: 1px solid transparent;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.2s;
  border: 1px solid #5f65dc29;
}

.card-server-content a:hover {
  color: #fff;
  background: linear-gradient(90deg, #13131a 0%, #1a1424 100%);
  border-color: rgba(95, 101, 220, 0.35);
  transition: 0.2s;
}

.card-server-content a.active {
  color: #fff;
  font-weight: 600;
  padding-right: 30px;
  background: linear-gradient(90deg, #13131a 0%, #322647 100%);
}

.card-server-content a .title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.card-server-content a::before {
  content: '';
  position: relative;
  display: flex;
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  height: 22px;
  font-size: 10px;
  border-radius: 50px;
  margin-right: 11px;
  background-color: #0e0e14;
  align-items: center;
  justify-content: center;
}

.card-server-content a.active::before {
  content: '●';
  position: relative;
  display: flex;
  padding-bottom: 2px;
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  height: 22px;
  color: #5f65dca3;
  font-size: 22px;
  border-radius: 50px;
  margin-right: 11px;
  background-color: #0e0e14;
  justify-content: center;
  align-items: center;
}

.flex_head_block {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.for-msg-thanks {
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-card-color);
  border-radius: var(--radius-md);
  margin: 10px 0;
  padding: 10px;
}
.comm-list {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.for-msg-thanks .thank_str {
  border-radius: 0;
  margin-top: 0;
  background: 0;
}

.flex_head_l {
  display: flex;
  gap: 10px;
  align-items: center;
}

.flex_head_block i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--primary);
    transition: all var(--transition);
}

.flex_head {
  display: flex;
  flex-direction: column;
  line-height: 18px;
  min-width: 0; /* enables text truncation */
}

.name_head {
  color: #ffff;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desp_head {
  color: #8f9093;
  font-weight: 600;
  line-height: 15px;
  font-size: 11px;
}

span.mods-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    text-decoration: none;
    font-family: inherit;
    background: rgba(95, 101, 220, 0.15);
    border: 1px solid rgba(95, 101, 220, 0.3);
    color: var(--primary-hover);
}

.mods-picker {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  background: #121212;
  padding: 10px;
  width: fit-content;
  border-radius: 15px;
  margin-top: 40px;
  margin-left: 20px;
  padding-top: 10px;
}

.loader {
    margin: 0 auto;
}

.mods-picker-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.mods-picker .mod,
.mods-picker-vertical .mod {
  height: 45px;
  border: none;
  display: flex;
  transition: 0.2s;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  padding: 0px 8px;
  font-weight: 600;
  gap: 8px;
  color: #ffffff;
  font-size: 11.5px;
  border-radius: 11px;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}

.mods-picker-vertical .mod {
  transform: skewX(360deg);
  justify-content: space-between;
  width: 100%;
}

.mods-picker-vertical .mods-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mods-picker .mod i,
.mods-picker-vertical .mod i {
  background: var(--GLOBAL, radial-gradient(100% 100% at 50% 0, #5f65dc 0, #484da3 100%));
  text-shadow: #000000d4 1px 0 7px;
  width: 30px;
  height: 30px;
  display: flex;
  color: #fff;
  border-radius: 7px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
}

.modal-stats-body {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Modal Styles */
.modal-new {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.modal-new.show-modal {
    display: flex;
}

.modal-new .modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalFadeIn 0.3s ease;
}

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

.modal-headers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.modal-new-header {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.close-button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.close-button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.modal-open {
    overflow: hidden;
}

/* Modal from meatuikit.html */
.meatui_modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
    padding: 20px;
}

.meatui_modal-overlay.active {
    display: flex;
}

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

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

.meatui_modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    max-width: 800px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.meatui_modal--sm {
    max-width: 500px;
}

.meatui_modal--md {
    max-width: 800px;
}

.meatui_modal--lg {
    max-width: 1000px;
}

.meatui_modal--xl {
    max-width: 1400px;
}



.meatui_modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.meatui_modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.meatui_modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    font-size: 24px;
    padding: 0;
}

.meatui_modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.meatui_modal-back {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    font-size: 18px;
    padding: 0;
    margin-right: 12px;
}

.meatui_modal-back:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}


.meatui_modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    position: relative;
}

/* DateTimePicker inside modal */
.ui-datepicker {
    z-index: 10000 !important;
}

.ui-timepicker-div {
    z-index: 10000 !important;
}

.meatui_modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: .75rem;
  background-color: var(--bg-secondary);
  border-radius: .25rem;
}

/* Modal Variants */
.meatui_modal-large {
    max-width: 1000px;
}

.meatui_modal-small {
    max-width: 400px;
}

/* Ban Info Grid */
.ban-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
}

.ban-info-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: all var(--transition);
}

.ban-info-item:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.ban-info-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(95, 101, 220, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 20px;
}

.ban-info-content {
    flex: 1;
    min-width: 0;
}

.ban-info-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    text-overflow: ellipsis;
    word-break: unset;
    overflow: hidden;
    white-space: nowrap
}

.ban-info-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form input in modal */
.ban-info-value .form-input {
    width: 100%;
    margin-top: var(--spacing-xs);
}

/* Responsive */
@media (max-width: 768px) {
    .ban-info-grid {
        grid-template-columns: 1fr;
    }

    .meatui_modal-footer {
        flex-direction: column;
    }

    .meatui_modal-footer .btn {
        width: 100%;
    }
}
/* ============================================
   TinyMCE Editor Styles
   ============================================ */

/* Main container */
.tox-tinymce {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-tertiary) !important;
}

/* Toolbar */
.tox .tox-toolbar-overlord {
    background-color: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    color: var(--text-primary) !important;
    background-color: var(--bg-elevated) !important;
    border: none !important;
}

/* Toolbar buttons */
.tox .tox-tbtn {
    color: var(--text-secondary) !important;
    transition: all var(--transition);
    border-radius: var(--radius-sm) !important;
}

.tox .tox-tbtn svg {
    fill: var(--text-secondary) !important;
    transition: all var(--transition);
}

.tox .tox-tbtn:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
    transition: all var(--transition);
}

.tox .tox-tbtn:hover svg {
    fill: var(--primary) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
}

.tox .tox-tbtn--enabled svg {
    fill: var(--text-primary) !important;
}

/* Edit area */
.tox .tox-edit-area__iframe {
    background-color: var(--bg-tertiary) !important;
}

/* Menubar */
.tox .tox-menubar {
    background-color: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border) !important;
}

.tox .tox-mbtn {
    color: var(--text-secondary) !important;
    transition: all var(--transition);
}

.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
    background: var(--bg-tertiary) !important;
    color: var(--primary) !important;
}

.tox .tox-mbtn--active {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Statusbar (hidden) */
.tox .tox-statusbar {
    display: none !important;
}

/* Dialogs and popups */
.tox .tox-dialog {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.tox .tox-dialog__header {
    background-color: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.tox .tox-dialog__body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.tox .tox-dialog__footer {
    background-color: var(--bg-elevated) !important;
    border-top: 1px solid var(--border) !important;
}

/* Form elements inside TinyMCE */
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-selectfield select {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.tox .tox-textfield:focus,
.tox .tox-textarea:focus,
.tox .tox-selectfield select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(95, 101, 220, 0.1) !important;
}

/* Buttons inside TinyMCE */
.tox .tox-button {
    background-color: var(--primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition);
}

.tox .tox-button:hover {
    background-color: var(--primary-hover) !important;
}

.tox .tox-button--secondary {
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

.tox .tox-button--secondary:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Color picker */
.tox .tox-swatch {
    border: 1px solid var(--border) !important;
}

/* Content inside editor */
.tox .tox-edit-area__iframe body {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-family: 'Montserrat', sans-serif !important;
}


.block_top_topic {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.name_info_block_topic {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head_block_topic_full {
  display: flex;
  gap: 11px;
  align-items: center;
}

.head_block_topic_full i {
  width: 45px;
  height: 45px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  margin-bottom: 4px;
  color: #878ca3;
  font-size: 18px;
  min-width: 45px;
  align-items: center;
  justify-content: center;
}

.flex_text_topic_forum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 18px;
}

.heading {
  color: #ffff;
  position: relative;
  font-size: 16px;
  font-weight: 600;
}

.second_heading {
  font-size: 12px;
  color: #767b93;
  font-weight: 600;
}


.bans-comment-player {
    word-wrap: break-word;
}
/* ============================================
   Swiper Fix for ban.tpl
   ============================================ */

/* Fix swiper container height */
.swiper-container {
    height: auto !important;
}

.swiper-wrapper {
    height: auto !important;
    align-items: stretch;
}

.swiper-slide {
    height: auto !important;
}

/* Fix for screenshots slider */
.screenshots .swiper-container {
    min-height: 400px;
    height: auto !important;
}

.screenshots .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
}

.screenshots .swiper-slide img {
    max-width: 100%;
    max-height: 600px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

/* Ensure swiper wrapper doesn't stretch */
.bans-slider {
    display: flex;
    align-items: stretch;
}

/* Fix swiper slide content */
.bans-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.main-post .content {
    grid-column: span 3;
}

.main-post {
        grid: auto-flow dense / 1fr 1fr 1fr 1fr;
}

.controls-big > div {
    height: fit-content;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

.main-post .content .screenshots {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.main-post .mob-block-info, .main-post .right {
    max-width: unset;
    width: 416px;
}

.main-post .mob-block-info .info, .main-post .right .info {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.btn-group-toggle label {
    padding: 10px !important;
}

.groups-body {
    padding-top: 15px;
  padding: 0 5px 0 0;
  font-weight: 600;
  line-height: 23px;
  height: 295px;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative
}
/* Forum item styles */
.forum-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    gap: 20px;
}

.forum-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.forum-item-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.forum-item-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.forum-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.forum-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-item-title:hover {
    color: var(--primary);
}

.forum-item-desc {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-item-activity {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.forum-item-empty {
    padding: 12px 20px;
}

.forum-item-last {
    display: flex;
    align-items: center;
    gap: 12px;
}

.forum-item-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    transition: border-color 0.2s ease;
}

.forum-item-avatar:hover {
    border-color: var(--primary);
}

.forum-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-item-last-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 250px;
}

.forum-item-last-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-item-last-title:hover {
    color: var(--primary);
}

.forum-item-last-date {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.forum-item-last-date i {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .forum-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .forum-item-activity {
        width: 100%;
    }

    .forum-item-last-info {
        max-width: 100%;
    }
}

/* Forum items container */
.forum-items-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Topic item styles */
.topic-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.topic-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.topic-item--fixed {
    border-left: 3px solid var(--primary);
    background: linear-gradient(90deg, rgba(95, 101, 220, 0.05) 0%, var(--bg-secondary) 100%);
}

.topic-item--fixed:hover {
    background: linear-gradient(90deg, rgba(95, 101, 220, 0.08) 0%, var(--bg-tertiary) 100%);
}

.topic-item-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.topic-item-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.topic-item-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.topic-badge i {
    font-size: 14px;
}

.topic-badge--closed {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.topic-badge--pinned {
    background: rgba(95, 101, 220, 0.1);
    border-color: rgba(95, 101, 220, 0.3);
    color: var(--primary);
}

.topic-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-item-title:hover {
    color: var(--primary);
}

.topic-item-meta {
    font-size: 14px;
    color: var(--text-secondary);
}

.topic-item-meta a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.topic-item-meta a:hover {
    color: var(--primary);
}

.topic-item-activity {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.topic-item-empty {
    padding: 12px 20px;
}

.topic-item-last {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topic-item-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    transition: border-color 0.2s ease;
}

.topic-item-avatar:hover {
    border-color: var(--primary);
}

.topic-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topic-item-last-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 200px;
}

.topic-item-last-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-item-last-date:hover {
    color: var(--primary);
}

.topic-item-last-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .topic-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .topic-item-activity {
        width: 100%;
    }

    .topic-item-last-info {
        max-width: 100%;
    }
}

/* Forum topics container */
#forum_topics {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Forum message styles */
.forum-message {
    list-style: none;
}

.forum-message-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.3s ease;
}

.forum-message-content:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.forum-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.forum-message-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.forum-message-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.forum-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-message-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.forum-message-username {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.forum-message-username:hover {
    color: var(--primary);
}

.forum-message-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

.forum-message-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.forum-message-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
}

.forum-message-stat i {
    font-size: 16px;
}

.forum-message-body {
    margin-bottom: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    word-wrap: break-word;
}

.forum-message-body .for-text {
    font-size: 15px;
}

.forum-message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
    .forum-message-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .forum-message-stats {
        width: 100%;
        justify-content: flex-start;
    }

    .forum-message-stat {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   Activity Rewards Swiper Customization
   ============================================ */

.myRewardsSwiper {
    padding-bottom: 32px !important;
}

.myRewardsSwiper .swiper-scrollbar {
    bottom: 0 !important;
    background: rgba(95, 101, 220, 0.1) !important;
    border-radius: 6px !important;
    height: 6px !important;
}

.myRewardsSwiper .swiper-scrollbar-drag {
    background: linear-gradient(90deg, var(--primary), var(--primary-hover)) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 8px rgba(95, 101, 220, 0.4);
}

.myRewardsSwiper .swiper-scrollbar-drag:hover {
    background: linear-gradient(90deg, var(--primary-hover), var(--primary)) !important;
    box-shadow: 0 0 12px rgba(95, 101, 220, 0.6);
}

/* Activity Rewards Modal Grid - 2 columns */
#howtoworks .ban-info-grid {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    #howtoworks .ban-info-grid {
        grid-template-columns: 1fr;
    }
}