/* ===== Tasks Module Styles - Scoped to .tasks-module ===== */

/* Основные контейнеры */
.tasks-module .tasks-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.tasks-module .tasks-header h2 {
    color: var(--text-light);
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.tasks-module .tasks-header p {
    color: var(--text-muted);
    margin: 0;
    font-size: 1.1rem;
}

/* Сетка заданий */
.tasks-module .tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

/* Карточка задания */
.tasks-module .task-card {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.tasks-module .task-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.tasks-module .task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-red) 0%, var(--color-red-light) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tasks-module .task-card:hover::before {
    transform: scaleX(1);
}

.tasks-module .task-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.02) 50%, transparent 51%);
    pointer-events: none;
}

/* Заголовок карточки */
.tasks-module .task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px 15px;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.tasks-module .task-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(215, 31, 44, 0.3);
    transition: all 0.3s ease;
}

.tasks-module .task-card:hover .task-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(215, 31, 44, 0.4);
}

/* Тело карточки */
.tasks-module .task-card-body {
    padding: 0 25px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tasks-module .task-name {
    color: var(--text-light);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.tasks-module .task-card-body p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
    flex: 1;
}

/* Футер карточки */
.tasks-module .task-card-footer {
    padding: 15px 25px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.tasks-module .task-rewards {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tasks-module .reward-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    width: 100%;
}

.tasks-module .reward-item i {
    color: #FFD700;
    font-size: 18px;
    flex-shrink: 0;
}

.tasks-module .reward-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.tasks-module .reward-title {
    font-weight: 600;
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 2px;
}

.tasks-module .reward-description {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.8;
    line-height: 1.3;
}

.tasks-module .reward-xp{
    margin-top: 6px;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.35);
    color: #f39c12;
    font-weight: 700;
    margin-left: 7px;
    letter-spacing: .3px;
}

.tasks-module .reward-time{
    margin-top: 6px;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.35);
    color: #3498db;
    font-weight: 700;
    margin-left: 7px;
    letter-spacing: .3px;
}

.tasks-module .reward-time i {
    margin-right: 4px;
    color: #3498db;
}

.tasks-module .task-card.completed {
    opacity: 0.8;
    background: var(--bg-card);
    /* border-color: rgba(76, 175, 80, 0.3); */
}

.tasks-module .task-card.completed::before {
    background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%);
    transform: scaleX(1);
}

.tasks-module .task-card.completed .task-icon {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.tasks-module .task-card.completed .btn-outline-success {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

/* Разделители */
.tasks-module .tasks-separator {
    grid-column: 1 / -1;
    position: relative;
    pointer-events: none;
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(30px);
    animation-delay: 0.5s;
}

.tasks-module .separator-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 20px 0;
}

.tasks-module .separator-line {
    flex: 1;
    height: 2px;
    position: relative;
    background: linear-gradient(90deg, transparent 0%, #4CAF50 50%, transparent 100%);
}

.tasks-module .separator-line::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 4px;
    border-radius: 2px;
    background: #4CAF50;
}

.tasks-module .separator-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    padding: 12px 24px;
    border-radius: 25px;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

.tasks-module .separator-text i {
    font-size: 18px;
    animation: pulse 2s infinite;
    margin-right: 8px;
}

/* Ежедневные разделители (желтые) */
.tasks-module .daily-separator .separator-line {
    background: linear-gradient(90deg, transparent 0%, #f39c12 50%, transparent 100%);
}

.tasks-module .daily-separator .separator-line::after {
    background: #f39c12;
}

.tasks-module .daily-separator .separator-text {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
    border: 2px solid rgba(243, 156, 18, 0.3);
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.2);
}

.tasks-module .daily-separator .separator-text i {
    color: #f39c12;
}

/* Разовые разделители (синие) */
.tasks-module .one-time-separator .separator-line {
    background: linear-gradient(90deg, transparent 0%, #3498db 50%, transparent 100%);
}

.tasks-module .one-time-separator .separator-line::after {
    background: #3498db;
}

.tasks-module .one-time-separator .separator-text {
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    border: 2px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.tasks-module .one-time-separator .separator-text i {
    color: #3498db;
}

/* Блок с временем сброса */
.tasks-module .daily-reset-info {
    text-align: center;
    margin: 0;
    padding: 0 0 20px 0;
    margin-top: -22px;
    position: relative;
}

.tasks-module .daily-reset-info .reset-arrow {
    font-size: 20px;
    color: #f39c12;
    margin-bottom: 15px;
    opacity: 0.8;
    animation: bounce 1s infinite;
}

.tasks-module .time-blocks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tasks-module .time-block {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.15) 0%, rgba(243, 156, 18, 0.05) 100%);
    border: 2px solid rgba(243, 156, 18, 0.3);
    border-radius: 12px;
    padding: 12px 8px;
    min-width: 60px;
    flex-shrink: 0;
    gap: 5px;
    margin: 0;
    width: max-content;
    text-align: center;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.tasks-module .time-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.3);
    border-color: rgba(243, 156, 18, 0.5);
}

.tasks-module .time-value {
    font-size: 24px;
    font-weight: 700;
    color: #f39c12;
    line-height: 1;
    margin-bottom: 4px;
    font-family: 'Courier New', monospace;
}

.tasks-module .time-label {
    font-size: 10px;
    color: #f39c12;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.tasks-module .time-separator {
    font-size: 20px;
    font-weight: 700;
    color: #f39c12;
    opacity: 0.6;
    margin: 0 2px;
    flex-shrink: 0;
    white-space: nowrap;
}

.tasks-module .time-block.hidden,
.tasks-module .time-separator.hidden {
    display: none !important;
}

/* Кнопки */
.tasks-module .btn {
    padding: 12px 24px;
    border: 2px solid;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

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

.tasks-module .btn:hover::before {
    left: 100%;
}

.tasks-module .btn-outline-primary {
    color: #fff;
    border-color: var(--color-red);
    background: transparent;
}

.tasks-module .btn-outline-primary:hover {
    background: var(--color-red);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(215, 31, 44, 0.4);
}

.tasks-module .btn-outline-success {
    color: #4CAF50;
    border-color: #4CAF50;
    background: transparent;
}

.tasks-module .btn-outline-success:hover {
    background: #4CAF50;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.tasks-module .task-progress {margin-top: 10px;}

.tasks-module .progress-bar {
    width: 100%;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasks-module .progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    border-radius: 4px;
    transition: width 0.6s ease;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.tasks-module .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.tasks-module .progress-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    font-weight: 700;
}

/* Ссылки в описаниях */
.tasks-module .task-description {
    text-align: center;
}

.tasks-module .task-description a {
    display: inline-flex;
    width: fit-content;
    margin-top: 12px;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0077ff 0%, #0056cc 100%);
    color: white !important;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 119, 255, 0.3);
    text-align: center;
}

.tasks-module .task-description a:hover {
    background: linear-gradient(135deg, #0056cc 0%, #003d99 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.4);
    color: white !important;
}

.tasks-module .task-description a:before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.162 18.994c.609 0 .858-.406.858-.866.018-.57.252-1.003.547-1.816.541-1.527.93-3.33.93-5.312 0-1.98-.389-3.785-.93-5.312-.295-.813-.529-1.246-.547-1.816 0-.46-.249-.866-.858-.866H9.326c-.609 0-.858.406-.858.866.018.57.252 1.003.547 1.816.541 1.527.93 3.33.93 5.312 0 1.98-.389 3.785-.93 5.312-.295.813-.529 1.246-.547 1.816 0 .46.249.866.858.866h3.836zM20.4 3.423H3.6C2.716 3.423 2 4.139 2 5.023v13.954c0 .884.716 1.6 1.6 1.6h16.8c.884 0 1.6-.716 1.6-1.6V5.023c0-.884-.716-1.6-1.6-1.6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.tasks-module .task-description a.vk-group-link:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1.01-1.49-.864-1.744-.864-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.44 0 .61.203.78.677.863 2.49 2.303 4.675 2.896 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.203.17-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.17.508.271.508.22 0 .407-.136.813-.542 1.254-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.271.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.795.780 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z'/%3E%3C/svg%3E");
}

.tasks-module .task-description a.vk-friend-link:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1.01-1.49-.864-1.744-.864-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.44 0 .61.203.78.677.863 2.49 2.303 4.675 2.896 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.203.17-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.17.508.271.508.22 0 .407-.136.813-.542 1.254-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.271.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.795.780 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z'/%3E%3C/svg%3E");
}

.tasks-module .task-description a.vk-chat-link:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1.01-1.49-.864-1.744-.864-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.44 0 .61.203.78.677.863 2.49 2.303 4.675 2.896 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.203.17-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.17.508.271.508.22 0 .407-.136.813-.542 1.254-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.271.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.795.780 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z'/%3E%3C/svg%3E");
}

.tasks-module .task-description a.telegram-chat-link:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
}

.tasks-module .task-description a.telegram-chat-link {
    color: white !important;
    border-color: #0088cc !important;
}

.tasks-module .task-description a.telegram-chat-link:hover {
    background-color: #0088cc !important;
}

.tasks-module .completion-badge {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    min-width: 120px;
    transition: all 0.3s ease;
}

.tasks-module .completion-badge:hover {
    transform: translateY(-2px);
}

.tasks-module .completion-badge i {
    margin-right: 6px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Кулдаун кнопки */
.tasks-module .btn.cooldown {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3) !important;
}

.tasks-module .btn.cooldown:hover {
    transform: none !important;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

.tasks-module .btn.cooldown i.fa-spinner {
    animation: spin 1s linear infinite;
}

.tasks-module .btn.cooldown i.fa-clock {
    margin-right: 5px;
}

/* Пустое состояние */
.tasks-module .tasks-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.tasks-module .tasks-empty i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.tasks-module .tasks-empty h3 {
    margin-bottom: 10px;
    color: var(--text-light);
}

.tasks-module .tasks-empty p {
    font-size: 16px;
    line-height: 1.6;
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Анимации карточек с задержками */
.tasks-module .task-card:nth-child(1) { animation-delay: 0.1s; }
.tasks-module .task-card:nth-child(2) { animation-delay: 0.2s; }
.tasks-module .task-card:nth-child(3) { animation-delay: 0.3s; }
.tasks-module .task-card:nth-child(4) { animation-delay: 0.4s; }
.tasks-module .task-card:nth-child(5) { animation-delay: 0.5s; }
.tasks-module .task-card:nth-child(6) { animation-delay: 0.6s; }

/* Адаптивность */
@media (max-width: 768px) {
    .tasks-module .tasks-container {
        padding: 10px;
    }
    
    .tasks-module .tasks-header {
        padding: 20px;
    }
    
    .tasks-module .tasks-header h2 {
        font-size: 1.5rem;
    }
    
    .tasks-module .tasks-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px 0;
    }
    
    .tasks-module .task-card-header {
        padding: 15px 20px 10px;
    }
    
    .tasks-module .task-card-body {
        padding: 0 20px 15px;
    }
    
    .tasks-module .task-card-footer {
        padding: 10px 20px 15px;
    }
    
    .tasks-module .separator-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .tasks-module .separator-line {
        width: 100%;
        height: 1px;
    }
    
    .tasks-module .separator-text {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .tasks-module .btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .tasks-module .task-name {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .tasks-module .tasks-separator .separator-line,
    .tasks-module .tasks-separator .separator-line::after { 
        display: none !important; 
    }
    .tasks-module .separator-content { 
        justify-content: center; 
        gap: 0; 
        padding: 12px 0; 
    }
}

.profile-level {
    max-width: 180px;
}

.tasks-module .level-badge {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
}
.tasks-module .userLevel{display:inline-flex;align-items:center;justify-content:center;width: 36px;height: 36px;padding:0;border-radius:6px;background-repeat:no-repeat;background-size: 32px 320px;background-position:0 0;color:#fff;font-weight:700;font-size: 16px;line-height:28px;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.tasks-module .profile-level{display:flex;align-items:center;gap:6px;margin-top:2px}
.tasks-module .profile-level .level-label{font-size:12px;color:var(--text-muted);line-height:24px}
.tasks-module .profile-level .level-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px}
.tasks-module .profile-level .userLevel{vertical-align:middle;margin:0}
.tasks-module .userLevel.lvl_0{border:2px solid #9b9b9b}
.tasks-module .userLevel.lvl_10{border:2px solid #c02942}
.tasks-module .userLevel.lvl_20{border:2px solid #d95b43}
.tasks-module .userLevel.lvl_30{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_40{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_50{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_60{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_70{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_80{border:2px solid #542437}
.tasks-module .userLevel.lvl_90{border:2px solid #997c52}

/* Промежуточные уровни 31-99 с цветными рамками */
.tasks-module .userLevel.lvl_31{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_32{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_33{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_34{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_35{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_36{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_37{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_38{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_39{border:2px solid #fecc23}
.tasks-module .userLevel.lvl_41{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_42{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_43{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_44{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_45{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_46{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_47{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_48{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_49{border:2px solid #467a3c}
.tasks-module .userLevel.lvl_51{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_52{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_53{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_54{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_55{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_56{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_57{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_58{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_59{border:2px solid #4e8ddb}
.tasks-module .userLevel.lvl_61{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_62{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_63{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_64{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_65{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_66{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_67{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_68{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_69{border:2px solid #7652c9}
.tasks-module .userLevel.lvl_71{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_72{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_73{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_74{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_75{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_76{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_77{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_78{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_79{border:2px solid #c252c9}
.tasks-module .userLevel.lvl_81{border:2px solid #542437}
.tasks-module .userLevel.lvl_82{border:2px solid #542437}
.tasks-module .userLevel.lvl_83{border:2px solid #542437}
.tasks-module .userLevel.lvl_84{border:2px solid #542437}
.tasks-module .userLevel.lvl_85{border:2px solid #542437}
.tasks-module .userLevel.lvl_86{border:2px solid #542437}
.tasks-module .userLevel.lvl_87{border:2px solid #542437}
.tasks-module .userLevel.lvl_88{border:2px solid #542437}
.tasks-module .userLevel.lvl_89{border:2px solid #542437}
.tasks-module .userLevel.lvl_91{border:2px solid #997c52}
.tasks-module .userLevel.lvl_92{border:2px solid #997c52}
.tasks-module .userLevel.lvl_93{border:2px solid #997c52}
.tasks-module .userLevel.lvl_94{border:2px solid #997c52}
.tasks-module .userLevel.lvl_95{border:2px solid #997c52}
.tasks-module .userLevel.lvl_96{border:2px solid #997c52}
.tasks-module .userLevel.lvl_97{border:2px solid #997c52}
.tasks-module .userLevel.lvl_98{border:2px solid #997c52}
.tasks-module .userLevel.lvl_99{border:2px solid #997c52}


.tasks-module .userLevel.lvl_0,
.tasks-module .userLevel.lvl_10,
.tasks-module .userLevel.lvl_20,
.tasks-module .userLevel.lvl_30,
.tasks-module .userLevel.lvl_40,
.tasks-module .userLevel.lvl_50,
.tasks-module .userLevel.lvl_60,
.tasks-module .userLevel.lvl_70,
.tasks-module .userLevel.lvl_80,
.tasks-module .userLevel.lvl_90 {
    border-radius: 50%;
}
/* Уровни 100+ с спрайтами - высота 33px */
.tasks-module .userLevel.lvl_100,
.tasks-module .userLevel.lvl_200,
.tasks-module .userLevel.lvl_300,
.tasks-module .userLevel.lvl_400,
.tasks-module .userLevel.lvl_500,
.tasks-module .userLevel.lvl_600,
.tasks-module .userLevel.lvl_700,
.tasks-module .userLevel.lvl_800,
.tasks-module .userLevel.lvl_900,
.tasks-module .userLevel.lvl_1000,
.tasks-module .userLevel.lvl_1100,
.tasks-module .userLevel.lvl_1200,
.tasks-module .userLevel.lvl_1300,
.tasks-module .userLevel.lvl_1400,
.tasks-module .userLevel.lvl_1500,
.tasks-module .userLevel.lvl_1600,
.tasks-module .userLevel.lvl_1700,
.tasks-module .userLevel.lvl_1800,
.tasks-module .userLevel.lvl_1900,
.tasks-module .userLevel.lvl_2000,
.tasks-module .userLevel.lvl_2100,
.tasks-module .userLevel.lvl_2200,
.tasks-module .userLevel.lvl_2300,
.tasks-module .userLevel.lvl_2400,
.tasks-module .userLevel.lvl_2500,
.tasks-module .userLevel.lvl_2600,
.tasks-module .userLevel.lvl_2700,
.tasks-module .userLevel.lvl_2800,
.tasks-module .userLevel.lvl_2900,
.tasks-module .userLevel.lvl_3000,
.tasks-module .userLevel.lvl_3100,
.tasks-module .userLevel.lvl_3200,
.tasks-module .userLevel.lvl_3300,
.tasks-module .userLevel.lvl_3400,
.tasks-module .userLevel.lvl_3500,
.tasks-module .userLevel.lvl_3600,
.tasks-module .userLevel.lvl_3700,
.tasks-module .userLevel.lvl_3800,
.tasks-module .userLevel.lvl_3900,
.tasks-module .userLevel.lvl_4000,
.tasks-module .userLevel.lvl_4100,
.tasks-module .userLevel.lvl_4200,
.tasks-module .userLevel.lvl_4300,
.tasks-module .userLevel.lvl_4400,
.tasks-module .userLevel.lvl_4500,
.tasks-module .userLevel.lvl_4600,
.tasks-module .userLevel.lvl_4700,
.tasks-module .userLevel.lvl_4800,
.tasks-module .userLevel.lvl_4900,
.tasks-module .userLevel.lvl_5000,
.tasks-module .userLevel.lvl_5100,
.tasks-module .userLevel.lvl_5200,
.tasks-module .userLevel.lvl_5300,
.tasks-module .userLevel.lvl_5400,
.tasks-module .userLevel.lvl_5500,
.tasks-module .userLevel.lvl_5600,
.tasks-module .userLevel.lvl_5700,
.tasks-module .userLevel.lvl_5800,
.tasks-module .userLevel.lvl_5900,
.tasks-module .userLevel.lvl_6000,
.tasks-module .userLevel.lvl_6100 {
    height: 32px;
    line-height: 33px;
    font-size: 13px;
    width: 32px;
}

.tasks-module .userLevel.lvl_100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_hexagons.png")}
.tasks-module .userLevel.lvl_200{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_shields.png")}
.tasks-module .userLevel.lvl_300{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_books.png")}
.tasks-module .userLevel.lvl_400{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_chevrons.png")}
.tasks-module .userLevel.lvl_500{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_circle2.png")}
.tasks-module .userLevel.lvl_600{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_angle.png")}
.tasks-module .userLevel.lvl_700{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_flag.png")}
.tasks-module .userLevel.lvl_800{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_wings.png")}
.tasks-module .userLevel.lvl_900{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_arrows.png")}
.tasks-module .userLevel.lvl_1000{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_crystals.png")}

.tasks-module .userLevel.lvl_1100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_space.png")}
.tasks-module .userLevel.lvl_1200{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_waterelement.png")}
.tasks-module .userLevel.lvl_1300{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_fireelement.png")}
.tasks-module .userLevel.lvl_1400{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_earthelement.png")}
.tasks-module .userLevel.lvl_1500{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_airelement_1-2.png")}
.tasks-module .userLevel.lvl_1600{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_airelement_3-4.png")}
.tasks-module .userLevel.lvl_1700{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_airelement_5-6.png")}
.tasks-module .userLevel.lvl_1800{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_airelement_7-8.png")}
.tasks-module .userLevel.lvl_1900{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_airelement_9-10.png")}
.tasks-module .userLevel.lvl_2000{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_geo_1-2.png?v=2")}
.tasks-module .userLevel.lvl_2100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_geo_3-4.png?v=2")}
.tasks-module .userLevel.lvl_2200{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_geo_5-6.png?v=2")}
.tasks-module .userLevel.lvl_2300{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_geo_7-8.png?v=2")}
.tasks-module .userLevel.lvl_2400{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_geo_9-10.png?v=2")}
.tasks-module .userLevel.lvl_2500{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_mandala_1-2.png?v=2")}
.tasks-module .userLevel.lvl_2600{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_mandala_3-4.png?v=2")}
.tasks-module .userLevel.lvl_2700{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_mandala_5-6.png?v=2")}
.tasks-module .userLevel.lvl_2800{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_mandala_7-8.png?v=2")}
.tasks-module .userLevel.lvl_2900{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_mandala_9-10.png?v=2")}
.tasks-module .userLevel.lvl_3000{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_spiro_1-2.png?v=2")}
.tasks-module .userLevel.lvl_3100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_spiro_3-4.png?v=2")}
.tasks-module .userLevel.lvl_3200{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_spiro_5-6.png?v=2")}
.tasks-module .userLevel.lvl_3300{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_spiro_7-8.png?v=2")}
.tasks-module .userLevel.lvl_3400{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_spiro_9-10.png?v=2")}
.tasks-module .userLevel.lvl_3500{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_patterns_1-2.png?v=2")}
.tasks-module .userLevel.lvl_3600{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_patterns_3-4.png?v=2")}
.tasks-module .userLevel.lvl_3700{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_patterns_5-6.png?v=2")}
.tasks-module .userLevel.lvl_3800{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_patterns_7-8.png?v=2")}
.tasks-module .userLevel.lvl_3900{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_patterns_9-10.png?v=2")}
.tasks-module .userLevel.lvl_4000{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_shapes_1.png?v=2")}
.tasks-module .userLevel.lvl_4100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_shapes_2.png?v=2")}
.tasks-module .userLevel.lvl_4200{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_shapes_3.png?v=2")}
.tasks-module .userLevel.lvl_4300{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_shapes_4.png?v=2")}
.tasks-module .userLevel.lvl_4400{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_shapes_5.png?v=2")}
.tasks-module .userLevel.lvl_4500{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_grunge_1.png?v=2")}
.tasks-module .userLevel.lvl_4600{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_grunge_2.png?v=2")}
.tasks-module .userLevel.lvl_4700{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_grunge_3.png?v=2")}
.tasks-module .userLevel.lvl_4800{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_grunge_4.png?v=2")}
.tasks-module .userLevel.lvl_4900{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_grunge_5.png?v=2")}
.tasks-module .userLevel.lvl_5000{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_halftone_1.png?v=2")}
.tasks-module .userLevel.lvl_5100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_halftone_2.png?v=2")}
.tasks-module .userLevel.lvl_5200{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_halftone_3.png?v=2")}
.tasks-module .userLevel.lvl_5300{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5300_dashes.png")}
.tasks-module .userLevel.lvl_5400{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5400_crosshatch.png")}
.tasks-module .userLevel.lvl_5500{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5500_spiral.png")}
.tasks-module .userLevel.lvl_5600{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5600_leaves.png")}
.tasks-module .userLevel.lvl_5700{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5700_mountain.png")}
.tasks-module .userLevel.lvl_5800{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5800_rain.png")}
.tasks-module .userLevel.lvl_5900{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_5900_tornado.png")}
.tasks-module .userLevel.lvl_6000{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_6000_snowflake.png")}
.tasks-module .userLevel.lvl_6100{background-image:url("https://community.fastly.steamstatic.com/public/shared/images/community/levels_6100_crown.png")}
.tasks-module .userLevel.lvl_plus_0{background-position:0 0}
.tasks-module .userLevel.lvl_plus_10{background-position:0 -32px}
.tasks-module .userLevel.lvl_plus_20{background-position:0 -64px;}
.tasks-module .userLevel.lvl_plus_30{background-position:0 -96px}
.tasks-module .userLevel.lvl_plus_40{background-position:0 -128px}
.tasks-module .userLevel.lvl_plus_50{background-position:0 -160px}
.tasks-module .userLevel.lvl_plus_60{background-position:0 -192px}
.tasks-module .userLevel.lvl_plus_70{background-position:0 -224px}
.tasks-module .userLevel.lvl_plus_80{background-position:0 -256px}
.tasks-module .userLevel.lvl_plus_90{background-position:0 -288px}

/* Топ пользователей по уровню */
.top-users-by-level {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(30, 30, 30, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

#top-users-widget {
    min-height: 200px;
}

.top-users-by-level::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ffd700, #c0c0c0, #cd7f32);
    border-radius: 12px 12px 0 0;
}

.top-users-by-level-header {
    text-align: center;
    margin-bottom: 15px;
}

.top-users-by-level-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.top-users-by-level-title i {
    color: #ffd700;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

.top-users-by-level-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.subtitle-link {
    color: #ffd700;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.subtitle-link:hover {
    color: #fff;
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Грид для топ пользователей */
.top-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.top-user-by-level-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: slideInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
    gap: 12px;
}

.top-user-by-level-item:nth-child(1) { animation-delay: 0.1s; }
.top-user-by-level-item:nth-child(2) { animation-delay: 0.2s; }
.top-user-by-level-item:nth-child(3) { animation-delay: 0.3s; }

.top-user-by-level-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Медали */
.user-medal {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: auto;
    position: relative;
    font-size: 18px;
    animation: bounce 2s infinite;
    flex-shrink: 0;
}

.user-medal.gold {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #b8860b;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.4);
}

.user-medal.silver {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #808080;
    box-shadow: 0 3px 10px rgba(192, 192, 192, 0.4);
}

.user-medal.bronze {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: #8b4513;
    box-shadow: 0 3px 10px rgba(205, 127, 50, 0.4);
}

.user-medal::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rotate 3s linear infinite;
    z-index: -1;
}

/* Информация о пользователе */
.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Адаптация дизайна уровней для виджета */
.top-users-by-level .level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 28px;
    height: 28px;
    margin-bottom: 4px;
    margin: 0;
}

.top-users-by-level .userLevel {
    vertical-align: middle;
    margin: 0;
    width: 35px;
    height: 35px;
    font-size: 15px;
}

.top-users-by-level .level-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 4px;
    font-weight: 500;
}

/* Специфичные стили уровней для виджета топ-пользователей */
.top-users-by-level .userLevel.lvl_0{border:2px solid #9b9b9b !important}
.top-users-by-level .userLevel.lvl_10{border:2px solid #c02942 !important}
.top-users-by-level .userLevel.lvl_20{border:2px solid #d95b43 !important}
.top-users-by-level .userLevel.lvl_30{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_40{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_50{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_60{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_70{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_80{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_90{border:2px solid #997c52 !important}

/* Промежуточные уровни 31-99 для виджета */
.top-users-by-level .userLevel.lvl_31{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_32{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_33{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_34{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_35{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_36{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_37{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_38{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_39{border:2px solid #fecc23 !important}
.top-users-by-level .userLevel.lvl_41{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_42{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_43{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_44{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_45{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_46{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_47{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_48{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_49{border:2px solid #467a3c !important}
.top-users-by-level .userLevel.lvl_51{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_52{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_53{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_54{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_55{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_56{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_57{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_58{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_59{border:2px solid #4e8ddb !important}
.top-users-by-level .userLevel.lvl_61{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_62{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_63{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_64{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_65{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_66{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_67{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_68{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_69{border:2px solid #7652c9 !important}
.top-users-by-level .userLevel.lvl_71{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_72{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_73{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_74{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_75{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_76{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_77{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_78{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_79{border:2px solid #c252c9 !important}
.top-users-by-level .userLevel.lvl_81{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_82{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_83{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_84{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_85{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_86{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_87{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_88{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_89{border:2px solid #542437 !important}
.top-users-by-level .userLevel.lvl_91{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_92{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_93{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_94{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_95{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_96{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_97{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_98{border:2px solid #997c52 !important}
.top-users-by-level .userLevel.lvl_99{border:2px solid #997c52 !important}

/* Круглые рамки для уровней 0-99 в виджете */
.top-users-by-level .userLevel.lvl_0,
.top-users-by-level .userLevel.lvl_10,
.top-users-by-level .userLevel.lvl_20,
.top-users-by-level .userLevel.lvl_30,
.top-users-by-level .userLevel.lvl_40,
.top-users-by-level .userLevel.lvl_50,
.top-users-by-level .userLevel.lvl_60,
.top-users-by-level .userLevel.lvl_70,
.top-users-by-level .userLevel.lvl_80,
.top-users-by-level .userLevel.lvl_90,
.top-users-by-level .userLevel.lvl_31,
.top-users-by-level .userLevel.lvl_32,
.top-users-by-level .userLevel.lvl_33,
.top-users-by-level .userLevel.lvl_34,
.top-users-by-level .userLevel.lvl_35,
.top-users-by-level .userLevel.lvl_36,
.top-users-by-level .userLevel.lvl_37,
.top-users-by-level .userLevel.lvl_38,
.top-users-by-level .userLevel.lvl_39,
.top-users-by-level .userLevel.lvl_41,
.top-users-by-level .userLevel.lvl_42,
.top-users-by-level .userLevel.lvl_43,
.top-users-by-level .userLevel.lvl_44,
.top-users-by-level .userLevel.lvl_45,
.top-users-by-level .userLevel.lvl_46,
.top-users-by-level .userLevel.lvl_47,
.top-users-by-level .userLevel.lvl_48,
.top-users-by-level .userLevel.lvl_49,
.top-users-by-level .userLevel.lvl_51,
.top-users-by-level .userLevel.lvl_52,
.top-users-by-level .userLevel.lvl_53,
.top-users-by-level .userLevel.lvl_54,
.top-users-by-level .userLevel.lvl_55,
.top-users-by-level .userLevel.lvl_56,
.top-users-by-level .userLevel.lvl_57,
.top-users-by-level .userLevel.lvl_58,
.top-users-by-level .userLevel.lvl_59,
.top-users-by-level .userLevel.lvl_61,
.top-users-by-level .userLevel.lvl_62,
.top-users-by-level .userLevel.lvl_63,
.top-users-by-level .userLevel.lvl_64,
.top-users-by-level .userLevel.lvl_65,
.top-users-by-level .userLevel.lvl_66,
.top-users-by-level .userLevel.lvl_67,
.top-users-by-level .userLevel.lvl_68,
.top-users-by-level .userLevel.lvl_69,
.top-users-by-level .userLevel.lvl_71,
.top-users-by-level .userLevel.lvl_72,
.top-users-by-level .userLevel.lvl_73,
.top-users-by-level .userLevel.lvl_74,
.top-users-by-level .userLevel.lvl_75,
.top-users-by-level .userLevel.lvl_76,
.top-users-by-level .userLevel.lvl_77,
.top-users-by-level .userLevel.lvl_78,
.top-users-by-level .userLevel.lvl_79,
.top-users-by-level .userLevel.lvl_81,
.top-users-by-level .userLevel.lvl_82,
.top-users-by-level .userLevel.lvl_83,
.top-users-by-level .userLevel.lvl_84,
.top-users-by-level .userLevel.lvl_85,
.top-users-by-level .userLevel.lvl_86,
.top-users-by-level .userLevel.lvl_87,
.top-users-by-level .userLevel.lvl_88,
.top-users-by-level .userLevel.lvl_89,
.top-users-by-level .userLevel.lvl_91,
.top-users-by-level .userLevel.lvl_92,
.top-users-by-level .userLevel.lvl_93,
.top-users-by-level .userLevel.lvl_94,
.top-users-by-level .userLevel.lvl_95,
.top-users-by-level .userLevel.lvl_96,
.top-users-by-level .userLevel.lvl_97,
.top-users-by-level .userLevel.lvl_98,
.top-users-by-level .userLevel.lvl_99 {
    border-radius: 50% !important;
}

.user-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.user-level-info {
    display: flex;
    align-items: center;
    /* gap: 10px; */
}

.user-level {
    color: #ffd700;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.user-xp {
    font-size: 11px;
    margin-top: 2px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.35);
    color: #f39c12;
    width: max-content;
    white-space: nowrap;
}

.user-avatar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
    transition: all 0.3s ease;
}

.user-avatar-link:hover .user-avatar {
    transform: scale(1.1);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Специальные эффекты для топ-3 */
.top-user-by-level-item:nth-child(1) {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border-color: rgba(255, 215, 0, 0.3);
}

.top-user-by-level-item:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    animation: shimmer 2s infinite;
}

.top-user-by-level-item:nth-child(2) {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.05));
    border-color: rgba(192, 192, 192, 0.3);
}

.top-user-by-level-item:nth-child(3) {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05));
    border-color: rgba(205, 127, 50, 0.3);
}

/* Анимации */
@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

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

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

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .top-users-by-level {
        margin: 10px 0;
        padding: 12px;
    }
    
    .top-users-by-level-title {
        font-size: 16px;
    }
    
    .top-user-by-level-item {
        padding: 10px;
    }
    
    .user-medal {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .user-name {
        font-size: 13px;
    }
    
    .user-level {
        font-size: 11px;
        padding: 2px 6px;
    }
    
    .user-avatar {
        width: 25px;
        height: 25px;
    }
}