/* Премиум стили и утилиты для Telegram-дизайна */

:root {
    /* Премиум цвета */
    --premium-gold: #c084fc;
    --premium-gradient: linear-gradient(45deg, #c084fc, #a855f7, #8b5cf6);
}

/* Премиум стили */
.premium-crown {
    color: var(--premium-gold);
    font-size: 14px;
    margin-right: 4px;
    animation: crown-bounce 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes crown-bounce {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        text-shadow: 0 0 5px var(--premium-gold);
    }
    50% { 
        transform: translateY(-2px) rotate(2deg); 
        text-shadow: 0 0 10px var(--premium-gold), 0 0 15px var(--premium-gold);
    }
}

.premium-username {
    background: var(--premium-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: premium-shine 3s ease-in-out infinite;
    font-weight: 500;
    /* Фоллбэк для браузеров без поддержки background-clip: text */
    color: var(--premium-gold);
}

/* Проверка поддержки background-clip: text */
@supports (-webkit-background-clip: text) {
    .premium-username {
        color: transparent;
    }
}

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

.premium-badge {
    background: var(--premium-gradient);
    background-size: 200% 200%;
    color: #000;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: premium-pulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes premium-pulse {
    0%, 100% { 
        transform: scale(1);
        background-position: 0% 50%;
    }
    50% { 
        transform: scale(1.05);
        background-position: 100% 50%;
    }
}

.btn-premium {
    background: var(--premium-gradient);
    background-size: 200% 200%;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: premium-glow 3s ease-in-out infinite;
}

.btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.3);
}

.btn-premium.active {
    animation: premium-active 1s ease-in-out infinite;
}

@keyframes premium-glow {
    0%, 100% { 
        background-position: 0% 50%;
        box-shadow: 0 0 10px rgba(192, 132, 252, 0.2);
    }
    50% { 
        background-position: 100% 50%;
        box-shadow: 0 0 20px rgba(192, 132, 252, 0.4);
    }
}

@keyframes premium-active {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.02);
    }
}

/* Адаптивность для премиум элементов */
@media (max-width: 768px) {
    .premium-crown {
        font-size: 12px;
        margin-right: 2px;
    }
    
    .premium-badge {
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* Утилиты */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.flex-1 { flex: 1; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-full { border-radius: 50%; }

.shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }