/**
 * ============================================================================
 * V2 EXCHANGES — Страницы обменов
 * ============================================================================
 * 
 * @file        web/css/v2/exchanges.css
 * @description Стили страниц обменов: index, my, show, participate
 * @version     2.0 (Декабрь 2025 - Рефакторинг)
 * 
 * ============================================================================
 * СОДЕРЖИМОЕ:
 * ────────────────────────────────────────
 * 
 * 1. Страница списка обменов (.v2-page-exchanges)
 * 2. Секции обменов (.v2-exchanges-section)
 * 3. Карточка обмена в списке (.v2-exchange-item)
 *    - Модификаторы: .participating, .upcoming
 * 4. Progress bar обмена (.v2-exchange-progress)
 * 5. Даты и действия (.v2-exchange-dates, .v2-exchange-actions)
 * 6. История обменов (.v2-past-exchanges-grid, .v2-past-exchange-card)
 * 7. Страница "Мои обмены" (.v2-my-*)
 * 8. Роли Санта/Получатель (.v2-role-*)
 * 9. Страница просмотра обмена (.v2-exchange-show)
 * 10. Страница участия (.v2-participate-*)
 * 
 * ============================================================================
 * ПЕРЕИСПОЛЬЗУЕМЫЕ КОМПОНЕНТЫ (из components.css):
 * 
 * - .v2-exchange-status — статусы обменов (registration, sending, reviews, end)
 * - .v2-stat-card — статистические карточки
 * - .v2-progress, .v2-progress-bar — прогресс-бары
 * - .v2-collapsible — раскрывающиеся секции
 * - .v2-info-zone, .v2-danger-zone — информационные зоны
 * - .v2-alert — оповещения
 * - .v2-info-box — информационные блоки
 * - .v2-modal — модальные окна
 * - .v2-btn-* — кнопки
 * - .v2-badge-* — бейджи
 * 
 * ============================================================================
 * ИСПОЛЬЗОВАНИЕ:
 * 
 * Страница обменов:
 * <div class="v2-page-exchanges">
 *     <div class="v2-page-header">...</div>
 *     <section class="v2-exchanges-section">...</section>
 * </div>
 * 
 * Карточка обмена:
 * <div class="v2-exchange-item participating">
 *     <div class="v2-exchange-participating-badge">✓ Ты участвуешь</div>
 *     <div class="v2-exchange-item-header">...</div>
 *     <div class="v2-exchange-progress">...</div>
 *     <div class="v2-exchange-item-footer">...</div>
 * </div>
 * 
 * ============================================================================
 */

/* ==========================================================================
   1. СТРАНИЦА СПИСКА ОБМЕНОВ
   ========================================================================== */

.v2-page-exchanges {
    padding: 20px 0;
}

/* Page Header — общий для страниц */
.v2-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 32px;
    gap: 24px;
    flex-wrap: wrap;
}

/* ==========================================================================
   2. СЕКЦИИ ОБМЕНОВ
   ========================================================================== */

.v2-exchanges-section {
    margin-bottom: 40px;
}

.v2-exchanges-section.v2-past {
    margin-bottom: 32px;
}

/* Секция ожидаемых */
.v2-exchanges-section.v2-upcoming .v2-section-title .v2-section-icon {
    animation: v2-pulse 2s infinite;
}

.v2-exchanges-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================================================================
   3. КАРТОЧКА ОБМЕНА В СПИСКЕ
   ========================================================================== */

.v2-exchange-item {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    position: relative;
    transition: all var(--v2-duration-normal) var(--v2-ease-smooth);
}

.v2-exchange-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Участвую в этом обмене */
.v2-exchange-item.participating {
    border-color: var(--v2-green);
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.v2-exchange-participating-badge {
    position: absolute;
    top: -10px;
    right: 24px;
    background: var(--v2-green);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Ожидаемый обмен */
.v2-exchange-item.upcoming {
    border-color: rgba(168, 85, 247, 0.3);
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(168, 85, 247, 0.05) 100%);
    opacity: 0.9;
}

.v2-exchange-item.upcoming:hover {
    opacity: 1;
    border-color: var(--v2-purple);
}

.v2-exchange-upcoming-badge {
    position: absolute;
    top: -10px;
    right: 24px;
    background: linear-gradient(135deg, var(--v2-purple) 0%, #9333ea 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

/* Header карточки */
.v2-exchange-item-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.v2-exchange-item-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--v2-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.v2-exchange-item-icon.registration {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.2) 0%, rgba(245, 200, 66, 0.1) 100%);
}

.v2-exchange-item-icon.sending {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.1) 100%);
}

.v2-exchange-item-icon.reviews {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.v2-exchange-item-icon.upcoming {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.v2-exchange-item-info {
    flex: 1;
    min-width: 0;
}

.v2-exchange-item-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 8px 0;
}

/* Используем .v2-exchange-status из components.css */

.v2-exchange-item-participants {
    text-align: right;
    flex-shrink: 0;
}

.v2-exchange-item-participants-count {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-gold);
    display: block;
}

.v2-exchange-item-participants-label {
    font-size: 12px;
    color: var(--v2-text-muted);
}

.v2-exchange-item-desc {
    color: var(--v2-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* ==========================================================================
   4. PROGRESS BAR ОБМЕНА
   ========================================================================== */

.v2-exchange-progress {
    margin-bottom: 20px;
}

.v2-exchange-progress-bar {
    height: 8px;
    background: var(--v2-bg-elevated);
    border-radius: 4px;
    position: relative;
    /*overflow: hidden;*/
}

.v2-exchange-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s var(--v2-ease-smooth);
}

.v2-exchange-progress-fill.registration {
    background: linear-gradient(90deg, var(--v2-gold) 0%, var(--v2-gold-light) 100%);
}

.v2-exchange-progress-fill.sending {
    background: linear-gradient(90deg, var(--v2-ice-blue) 0%, #7dd3fc 100%);
}

.v2-exchange-progress-fill.reviews {
    background: linear-gradient(90deg, var(--v2-purple) 0%, #c084fc 100%);
}

.v2-exchange-progress-steps {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    padding: 0 4px;
}

.v2-progress-step {
    width: 28px;
    height: 28px;
    background: var(--v2-bg-elevated);
    border: 2px solid var(--v2-bg-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 1;
    transition: all 0.3s ease;
}

.v2-progress-step.active {
    opacity: 1;
    background: var(--v2-bg-card);
    border-color: var(--v2-gold);
}

/* ==========================================================================
   5. ДАТЫ И ДЕЙСТВИЯ
   ========================================================================== */

.v2-exchange-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.v2-exchange-dates {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.v2-exchange-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--v2-text-muted);
}

.v2-exchange-date-icon {
    font-size: 16px;
}

.v2-exchange-date-label {
    color: var(--v2-text-dim);
}

.v2-exchange-date-value {
    font-weight: 600;
    color: var(--v2-text);
}

.v2-exchange-date-value.highlight {
    color: var(--v2-gold);
}

.v2-exchange-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(245, 200, 66, 0.1);
    border-radius: 20px;
    font-size: 13px;
}

.v2-exchange-countdown.urgent {
    background: rgba(220, 38, 38, 0.15);
    color: var(--v2-red-bright);
}

.v2-countdown-icon {
    font-size: 14px;
}

.v2-countdown-value {
    font-weight: 600;
    color: var(--v2-gold);
}

.v2-exchange-countdown.urgent .v2-countdown-value {
    color: var(--v2-red-bright);
}

.v2-exchange-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ==========================================================================
   6. БЛОК ИНФОРМАЦИИ О ДАТЕ ОТКРЫТИЯ
   ========================================================================== */

.v2-exchange-upcoming-info {
    background: rgba(168, 85, 247, 0.08);
    border-radius: var(--v2-radius-md);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px dashed rgba(168, 85, 247, 0.2);
}

.v2-upcoming-countdown {
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-upcoming-countdown-icon {
    font-size: 32px;
    animation: v2-float 3s ease-in-out infinite;
}

.v2-upcoming-countdown-content {
    flex: 1;
}

.v2-upcoming-countdown-label {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin-bottom: 4px;
}

.v2-upcoming-countdown-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-purple);
}

.v2-upcoming-countdown-timer {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin-top: 4px;
}

/* ==========================================================================
   7. ИСТОРИЯ ОБМЕНОВ (Past Exchanges Grid)
   ========================================================================== */

.v2-past-exchanges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.v2-past-exchange-card {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    transition: all var(--v2-duration-fast) var(--v2-ease-smooth);
}

.v2-past-exchange-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.v2-past-exchange-card.participated {
    border-color: rgba(16, 185, 129, 0.3);
}

.v2-past-exchange-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.v2-past-exchange-icon {
    font-size: 24px;
    opacity: 0.7;
}

.v2-past-exchange-info {
    flex: 1;
    min-width: 0;
}

.v2-past-exchange-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-past-exchange-date {
    font-size: 13px;
    color: var(--v2-text-dim);
}

.v2-past-exchange-badge {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--v2-green-glow);
    color: var(--v2-green-bright);
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.v2-past-exchange-stats {
    display: flex;
    gap: 20px;
}

.v2-past-exchange-stat {
    display: flex;
    flex-direction: column;
}

.v2-past-exchange-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--v2-text);
}

.v2-past-exchange-stat-label {
    font-size: 11px;
    color: var(--v2-text-dim);
}

/* ==========================================================================
   8. СТРАНИЦА "МОИ ОБМЕНЫ"
   ========================================================================== */

.v2-my-exchanges-page {
    padding: 20px 0;
}

.v2-my-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

/* ==========================================================================
   9. РОЛИ — Санта и Получатель
   ========================================================================== */

.v2-role-card {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    margin-bottom: 24px;
}

.v2-role-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.v2-role-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.v2-role-icon.santa {
    background: var(--v2-red-glow);
    border: 2px solid var(--v2-red);
}

.v2-role-icon.recipient {
    background: var(--v2-green-glow);
    border: 2px solid var(--v2-green);
}

.v2-role-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 4px;
}

.v2-role-subtitle {
    font-size: 13px;
    color: var(--v2-text-muted);
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .v2-page-header {
        flex-direction: column;
        text-align: center;
    }

    .v2-my-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .v2-exchange-item-header {
        flex-direction: column;
    }

    .v2-exchange-item-participants {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .v2-exchange-item-participants-count {
        font-size: 24px;
    }

    .v2-exchange-item-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .v2-exchange-dates {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .v2-exchange-actions {
        justify-content: stretch;
    }

    .v2-exchange-actions .v2-btn {
        width: 100%;
    }

    .v2-past-exchanges-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   11. LIGHT THEME
   ========================================================================== */

.v2-theme-light .v2-exchange-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-exchange-item:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-exchange-item.participating {
    background: linear-gradient(135deg, #ffffff 0%, rgba(16, 185, 129, 0.05) 100%);
}

.v2-theme-light .v2-exchange-item.upcoming {
    background: linear-gradient(135deg, #ffffff 0%, rgba(168, 85, 247, 0.05) 100%);
}

.v2-theme-light .v2-past-exchange-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-role-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-exchange-upcoming-info {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.15);
}

.v2-theme-light .v2-exchange-progress-bar {
    background: #e2e8f0;
}

/* ==========================================================================
   7. MY EXCHANGES PAGE — Страница "Мои обмены"
   ========================================================================== */

.v2-page-my-exchanges {
    padding: 20px 0;
}

/* My Stats — используем .v2-stat-card из components.css */
.v2-my-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

/* My Section */
.v2-my-section {
    margin-bottom: 40px;
}

/* My Exchange Card */
.v2-my-exchanges-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.v2-my-exchange-card {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: all var(--v2-duration-normal) var(--v2-ease-smooth);
}

.v2-my-exchange-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.v2-my-exchange-card.active {
    border-color: rgba(16, 185, 129, 0.3);
}

.v2-my-exchange-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.v2-my-exchange-glow.registration {
    background: linear-gradient(90deg, var(--v2-gold) 0%, transparent 100%);
}

.v2-my-exchange-glow.sending {
    background: linear-gradient(90deg, var(--v2-ice-blue) 0%, transparent 100%);
}

.v2-my-exchange-glow.reviews {
    background: linear-gradient(90deg, var(--v2-purple) 0%, transparent 100%);
}

.v2-my-exchange-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.v2-my-exchange-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--v2-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.v2-my-exchange-icon.registration {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.2) 0%, rgba(245, 200, 66, 0.1) 100%);
}

.v2-my-exchange-icon.sending {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.1) 100%);
}

.v2-my-exchange-icon.reviews {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.v2-my-exchange-info {
    flex: 1;
    min-width: 0;
}

.v2-my-exchange-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 8px 0;
}

/* Используем .v2-exchange-status из components.css */

/* Timer */
.v2-my-exchange-timer {
    text-align: center;
    flex-shrink: 0;
    background: var(--v2-bg-elevated);
    padding: 12px 20px;
    border-radius: var(--v2-radius-md);
    min-width: 80px;
}

.v2-my-exchange-timer.urgent {
    background: rgba(239, 68, 68, 0.15);
}

.v2-my-exchange-timer.urgent .v2-timer-value {
    color: var(--v2-red);
}

.v2-timer-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-gold);
    line-height: 1;
}

.v2-timer-unit {
    font-size: 12px;
    color: var(--v2-text-muted);
    margin-top: 2px;
}

/* My Exchange Progress — используем .v2-progress из components.css */
.v2-my-exchange-progress {
    margin-bottom: 24px;
}

.v2-progress-labels {
    display: flex;
    justify-content: space-between;
}

.v2-progress-labels span {
    font-size: 12px;
    color: var(--v2-text-dim);
    transition: color 0.3s ease;
}

.v2-progress-labels span.active {
    color: var(--v2-text);
    font-weight: 600;
}

/* Recipient Card */
.v2-my-exchange-recipient {
    margin-bottom: 24px;
}

.v2-recipient-label {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin-bottom: 12px;
}

.v2-recipient-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--v2-bg-elevated);
    padding: 16px;
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-recipient-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--v2-gold);
}

.v2-recipient-info {
    flex: 1;
}

.v2-recipient-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--v2-text);
    margin-bottom: 4px;
}

.v2-recipient-status {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-recipient-status.waiting {
    color: var(--v2-gold);
}

.v2-recipient-status.sent {
    color: var(--v2-ice-blue);
}

.v2-recipient-status.received {
    color: var(--v2-green);
}

.v2-recipient-status.reviewed {
    color: var(--v2-purple);
}

.v2-recipient-status.problem {
    color: var(--v2-red);
}

/* Waiting for draw */
.v2-my-exchange-waiting {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(245, 200, 66, 0.1);
    padding: 16px 20px;
    border-radius: var(--v2-radius-md);
    margin-bottom: 24px;
}

.v2-waiting-icon {
    font-size: 32px;
    animation: v2-rotate 3s linear infinite;
}

.v2-waiting-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-waiting-text strong {
    color: var(--v2-gold);
    font-size: 16px;
}

.v2-waiting-text span {
    color: var(--v2-text-muted);
    font-size: 13px;
}

/* Dates Row */
.v2-my-exchange-dates {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-date-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.v2-date-icon {
    font-size: 16px;
}

.v2-date-label {
    color: var(--v2-text-dim);
}

.v2-date-value {
    color: var(--v2-text);
    font-weight: 600;
}

/* My Exchange Actions */
.v2-my-exchange-actions {
    display: flex;
    gap: 12px;
}

/* Past List */
.v2-past-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-past-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--v2-bg-card-on-card);
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    transition: all 0.3s ease;
}

.v2-past-item:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: var(--v2-bg-card-hover);
}

.v2-past-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.v2-past-item-icon {
    font-size: 24px;
    opacity: 0.6;
}

.v2-past-item-info {
    flex: 1;
    min-width: 0;
}

.v2-past-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 4px 0;
}

.v2-past-item-date {
    font-size: 13px;
    color: var(--v2-text-dim);
}

.v2-past-item-details {
    display: flex;
    align-items: center;
    gap: 20px;
}

.v2-past-item-recipient {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--v2-text-muted);
}

.v2-past-recipient-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.v2-past-item-status {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.v2-past-item-status.reviewed {
    color: var(--v2-purple);
}

.v2-past-item-status.received {
    color: var(--v2-green);
}

.v2-past-item-status.sent {
    color: var(--v2-ice-blue);
}

.v2-past-item-badge {
    flex-shrink: 0;
}

/* ==========================================================================
   MY EXCHANGES — Light Theme
   ========================================================================== */

.v2-theme-light .v2-my-stat-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-my-exchange-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-my-exchange-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

.v2-theme-light .v2-my-exchange-timer {
    background: #f8fafc;
}

.v2-theme-light .v2-progress-track {
    background: #e2e8f0;
}

.v2-theme-light .v2-recipient-card {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.06);
}

.v2-theme-light .v2-my-exchange-dates {
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-my-exchange-waiting {
    background: rgba(245, 200, 66, 0.08);
}


/* ==========================================================================
   MY EXCHANGES — Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .v2-my-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-my-exchange-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .v2-my-exchange-card {
        padding: 20px;
    }

    .v2-my-exchange-header {
        gap: 12px;
    }

    .v2-my-exchange-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .v2-my-exchange-title {
        font-size: 18px;
    }

    .v2-my-exchange-dates {
        flex-direction: column;
        gap: 12px;
    }

    .v2-my-exchange-actions {
        flex-direction: column;
    }

    .v2-past-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .v2-past-item-details {
        width: 100%;
        justify-content: space-between;
    }
}

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

    .v2-my-stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        padding: 16px;
    }

    .v2-my-stat-icon {
        margin: 0;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .v2-my-stat-value {
        font-size: 24px;
    }
}

/* ==========================================================================
   СТРАНИЦА ПРОСМОТРА ОБМЕНА (.v2-exchange-show)
   ========================================================================== */

.v2-exchange-show {
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero Section */
.v2-exchange-hero {
    position: relative;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    padding: 40px;
    margin-bottom: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-exchange-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.v2-exchange-hero.registration .v2-exchange-hero-bg {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.08) 0%, transparent 50%);
}

.v2-exchange-hero.upcoming .v2-exchange-hero-bg {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

.v2-exchange-hero.sending .v2-exchange-hero-bg {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, transparent 50%);
}

.v2-exchange-hero.end .v2-exchange-hero-bg {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
}

.v2-exchange-hero-content {
    position: relative;
    z-index: 1;
}

.v2-exchange-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.v2-exchange-show .exchange-countdown {
    padding: 0px 10px;
}

.v2-exchange-show .exchange-countdown__icon {
    font-size: 22px;
}

/* Используем .v2-exchange-status из components.css */

.v2-exchange-hero-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 8px 0;
}

.v2-exchange-hero-season {
    font-size: 16px;
    color: var(--v2-text-muted);
    margin-bottom: 24px;
}

.v2-exchange-hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.v2-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.v2-hero-stat-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.v2-hero-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--v2-text);
}

.v2-hero-stat-label {
    font-size: 13px;
    color: var(--v2-text-muted);
}

.v2-hero-stat.highlight .v2-hero-stat-value {
    color: var(--v2-gold);
}

.v2-hero-stat.countdown .v2-hero-stat-value {
    color: var(--v2-ice-blue);
}

.v2-hero-stat.countdown.urgent .v2-hero-stat-value {
    color: var(--v2-red);
}

.v2-exchange-hero-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.v2-hero-particle {
    position: absolute;
    font-size: 24px;
    opacity: 0.3;
    animation: v2-float 4s ease-in-out infinite;
}

.v2-hero-particle:nth-child(2) {
    animation-delay: 1s;
}

.v2-hero-particle:nth-child(3) {
    animation-delay: 2s;
}

.v2-hero-particle:nth-child(4) {
    animation-delay: 3s;
}

/* Content Layout */
.v2-exchange-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
}

.v2-exchange-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.v2-exchange-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Description */
.v2-exchange-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--v2-text-muted);
}

.ward-review-link{
    text-align: center;
}

.v2-exchange-description p {
    color: unset;
}

.recipient-role-actions {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}

.v2-btn.v2-btn--purple:hover {
    color: var(--white);
}

/* Schedule Timeline */
.v2-schedule-timeline {
    display: flex;
    flex-direction: column;
}

.v2-schedule-item {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
}

.v2-schedule-item:last-child {
    padding-bottom: 0;
}

.v2-schedule-item-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
}

.v2-schedule-icon {
    width: 40px;
    height: 40px;
    background: var(--v2-bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.v2-schedule-item.completed .v2-schedule-icon {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--v2-green);
}

.v2-schedule-item.active .v2-schedule-icon {
    background: rgba(245, 200, 66, 0.15);
    border-color: var(--v2-gold);
    box-shadow: 0 0 20px var(--v2-gold-glow);
}

.v2-schedule-line {
    flex: 1;
    width: 2px;
    background: var(--v2-bg-elevated);
    margin-top: 8px;
}

.v2-schedule-item.completed .v2-schedule-line {
    background: var(--v2-green);
}

.v2-schedule-item-content {
    flex: 1;
    padding-top: 8px;
}

.v2-schedule-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.v2-schedule-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0;
}

.v2-schedule-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-schedule-badge.active {
    background: rgba(245, 200, 66, 0.15);
    color: var(--v2-gold);
}

.v2-schedule-badge.completed {
    background: rgba(16, 185, 129, 0.15);
    color: var(--v2-green);
}

.v2-pulse-dot-small {
    width: 6px;
    height: 6px;
    background: var(--v2-gold);
    border-radius: 50%;
    animation: v2-pulse 2s infinite;
}

.v2-schedule-item-dates {
    font-size: 13px;
    color: var(--v2-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.v2-schedule-date-separator {
    color: var(--v2-text-dim);
}

.v2-schedule-item-desc {
    font-size: 14px;
    color: var(--v2-text-dim);
    margin: 0;
}

/* Rules List */
.v2-rules-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.v2-rule-item {
    display: flex;
    gap: 16px;
}

.v2-rule-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v2-rule-content {
    flex: 1;
}

.v2-rule-content strong {
    display: block;
    font-size: 15px;
    color: var(--v2-text);
    margin-bottom: 4px;
}

.v2-rule-content p {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin: 0;
    line-height: 1.5;
}

.v2-rules-footer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Action Card */
.v2-card-action {
    border: 2px solid var(--v2-gold);
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(245, 200, 66, 0.05) 100%);
}

.v2-card-action.participating {
    border-color: var(--v2-green);
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.v2-action-participating,
.v2-action-waiting,
.v2-action-join,
.v2-action-admin-cancelled,
.v2-action-closed {
    padding: 24px;
    text-align: center;
}

.v2-action-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.v2-action-icon.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--v2-green);
}

.v2-action-icon.join {
    background: rgba(245, 200, 66, 0.15);
    animation: v2-pulse 2s infinite;
}

.v2-action-icon.waiting {
    background: rgba(168, 85, 247, 0.15);
}

.v2-action-icon.closed {
    background: rgba(148, 163, 184, 0.15);
}

.v2-action-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px 0;
}

.v2-action-text {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.v2-action-register {
    margin-top: 16px;
    font-size: 14px;
    color: var(--v2-text-muted);
}

.v2-action-register a {
    color: var(--v2-gold);
    text-decoration: none;
}

.v2-action-register a:hover {
    text-decoration: underline;
}

/* Profile Issues */
.v2-action-issues {
    text-align: left;
}

.v2-action-issues-text {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin: 0 0 16px 0;
}

.v2-action-issues-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.v2-action-issues-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--v2-radius-sm);
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--v2-red);
}

.v2-action-issues-list li span {
    font-size: 18px;
}

/* MEGA CTA Button */
.v2-btn-mega-cta {
    display: block;
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, var(--v2-gold) 0%, #e6a820 100%);
    border: none;
    border-radius: var(--v2-radius-lg);
    padding: 20px 24px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(245, 200, 66, 0.4);
    cursor: pointer;
    font-family: inherit;
}

.v2-btn-mega-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(245, 200, 66, 0.5);
    text-decoration: none;
}

.v2-btn-mega-cta-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%
    );
    animation: v2-shimmer 3s infinite;
}

@keyframes v2-shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.v2-btn-mega-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-btn-mega-cta-icon {
    font-size: 36px;
    animation: v2-float 2s ease-in-out infinite;
}

.v2-btn-mega-cta-text {
    flex: 1;
    text-align: left;
}

.v2-btn-mega-cta-main {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.v2-btn-mega-cta-sub {
    display: block;
    font-size: 13px;
    color: rgba(26, 26, 46, 0.7);
}

/* Agreement */
.v2-action-agreement {
    margin-top: 16px;
    font-size: 12px;
    color: var(--v2-text-dim);
}

.v2-action-agreement a {
    color: var(--v2-gold);
    text-decoration: none;
}

.v2-action-agreement a:hover {
    text-decoration: underline;
}

/* Profile Check */
.v2-profile-check {
    padding: 0;
}

.v2-profile-check-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.v2-profile-check-bar {
    flex: 1;
    height: 8px;
    background: var(--v2-bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.v2-profile-check-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.v2-profile-check-fill.good {
    background: var(--v2-green);
}

.v2-profile-check-fill.medium {
    background: var(--v2-gold);
}

.v2-profile-check-fill.low {
    background: var(--v2-red);
}

.v2-profile-check-percent {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text);
    min-width: 40px;
}

.v2-profile-check-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.v2-profile-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--v2-text-muted);
    padding: 8px 12px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-sm);
}

.v2-profile-check-item.done {
    color: var(--v2-green);
}

.v2-check-icon {
    font-size: 14px;
}

/* ==========================================================================
   СТРАНИЦА УЧАСТИЯ В ОБМЕНЕ (.v2-participate-page)
   ========================================================================== */

/* Exchange Status Widget */
.exchange-status-widget {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.95) 0%, rgba(20, 20, 40, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.exchange-status-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.exchange-status-hero__content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.exchange-status-hero__icon {
    font-size: 48px;
    animation: v2-float 3s ease-in-out infinite;
}

.exchange-status-hero__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 8px 0;
}

.exchange-status-hero__subtitle {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Используем .v2-exchange-status или .v2-badge-* из components.css */

.exchange-status-season {
    color: var(--v2-text-muted);
    font-size: 14px;
}

/* Participate Roles */
.v2-participate-roles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.v2-participate-role {
    min-width: 0;
}

/* Santa/Recipient Role Widget */
.santa-role-widget,
.recipient-role-widget {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.95) 0%, rgba(20, 20, 40, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.santa-role-header,
.recipient-role-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 0;
}

.santa-role-header__icon,
.recipient-role-header__icon {
    font-size: 32px;
}

.santa-role-header__title,
.recipient-role-header__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0;
}

.santa-role-body,
.recipient-role-body {
    padding: 24px;
    flex: 1;
}

/* Переиспользуемые компоненты (.v2-collapsible, .v2-info-zone, .v2-alert, .v2-info-box, .v2-modal) 
   перенесены в components.css */

/* Delivery Data */
.delivery-data {
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-md);
    padding: 20px;
    margin: 16px 0;
}

.delivery-data__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.delivery-data__row:last-child {
    border-bottom: none;
}

.delivery-data__label {
    color: var(--v2-text-muted);
    font-size: 14px;
}

.delivery-data__value {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.delivery-data__row--address .delivery-data__value {
    max-width: 60%;
}

/* ==========================================================================
   LIGHT THEME для страниц обмена
   ========================================================================== */

.v2-theme-light .v2-exchange-hero {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-exchange-hero-title {
    color: var(--v2-text-light);
}

.v2-theme-light .v2-hero-stat-value {
    color: var(--v2-text-light);
}

.v2-theme-light .v2-schedule-icon {
    background: rgba(0, 0, 0, 0.04);
}

.v2-theme-light .v2-schedule-line {
    background: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-schedule-item-title {
    color: var(--v2-text-light);
}

.v2-theme-light .v2-rule-icon {
    background: rgba(0, 0, 0, 0.04);
}

.v2-theme-light .v2-rule-content strong {
    color: var(--v2-text-light);
}

.v2-theme-light .v2-card-action {
    background: linear-gradient(135deg, #ffffff 0%, rgba(245, 200, 66, 0.08) 100%);
}

.v2-theme-light .v2-card-action.participating {
    background: linear-gradient(135deg, #ffffff 0%, rgba(16, 185, 129, 0.08) 100%);
}

.v2-theme-light .v2-action-title {
    color: var(--v2-text);
}

.v2-theme-light .v2-profile-check-bar {
    background: rgba(0, 0, 0, 0.06);
}

.v2-theme-light .v2-profile-check-item {
    background: rgba(0, 0, 0, 0.03);
}

.v2-theme-light .v2-action-issues-list li {
    background: rgba(239, 68, 68, 0.08);
}

.v2-theme-light .exchange-status-widget,
.v2-theme-light .santa-role-widget,
.v2-theme-light .recipient-role-widget {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Light theme для .v2-collapsible и .v2-modal в components.css */

.v2-theme-light .delivery-data {
    background: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   RESPONSIVE для страниц обмена
   ========================================================================== */

@media (max-width: 900px) {
    .v2-exchange-content {
        grid-template-columns: 1fr;
    }

    .v2-exchange-sidebar {
        order: -1;
    }

    .v2-participate-roles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ward-card__detail {
        flex-wrap: wrap;
    }

    .v2-exchange-hero {
        padding: 24px;
    }

    .v2-exchange-hero-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .v2-exchange-hero-title {
        font-size: 28px;
    }

    .v2-exchange-hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .v2-hero-stat {
        flex-direction: row;
        gap: 12px;
    }

    .v2-hero-stat-icon {
        margin-bottom: 0;
    }

    .v2-profile-check-items {
        grid-template-columns: 1fr;
    }

    .v2-schedule-item {
        gap: 12px;
    }

    .v2-schedule-item-marker {
        width: 32px;
    }

    .v2-schedule-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .v2-participate-page {
        padding: 0px;
    }

    .exchange-status-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .v2-participate-quick-actions {
        flex-direction: column;
    }

    .v2-quick-action {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .v2-btn-mega-cta {
        padding: 16px;
    }

    .v2-btn-mega-cta-icon {
        font-size: 28px;
    }

    .v2-btn-mega-cta-main {
        font-size: 16px;
    }
}

/* ==========================================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ PARTICIPATE PAGE
   ========================================================================== */

/* Santa/Recipient Role Widget — Extended Styles */
.santa-role-header__subtitle,
.recipient-role-header__subtitle {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin: 4px 0 0 0;
}

/* Status messages */
.santa-role-status,
.recipient-role-status {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.santa-role-status--gold,
.recipient-role-status--gold {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.08) 0%, rgba(245, 200, 66, 0.02) 100%);
}

.santa-role-status--blue,
.recipient-role-status--blue {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.08) 0%, rgba(99, 179, 237, 0.02) 100%);
}

.santa-role-status--green,
.recipient-role-status--green {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.08) 0%, rgba(72, 187, 120, 0.02) 100%);
}

.santa-role-status--purple,
.recipient-role-status--purple {
    background: linear-gradient(135deg, rgba(159, 122, 234, 0.08) 0%, rgba(159, 122, 234, 0.02) 100%);
}

.santa-role-status--red,
.recipient-role-status--red {
    background: linear-gradient(135deg, rgba(229, 62, 62, 0.08) 0%, rgba(229, 62, 62, 0.02) 100%);
}

.santa-role-status__text,
.recipient-role-status__text {
    margin: 0;
    font-size: 14px;
    color: var(--v2-text-secondary);
}

/* Waiting Animation */
.santa-role-waiting,
.recipient-role-waiting {
    text-align: center;
    padding: 20px 0;
}

.santa-role-waiting__animation {
    margin-bottom: 20px;
}

.gift-box-animation {
    display: inline-block;
    position: relative;
}

.gift-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

.gift-box__lid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(135deg, var(--v2-red), #c53030);
    border-radius: 8px 8px 0 0;
    animation: lid-bounce 2s ease-in-out infinite;
}

.gift-box__bow {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 24px;
    background: var(--v2-gold);
    border-radius: 50% 50% 0 0;
}

.gift-box__bow::before,
.gift-box__bow::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--v2-gold);
    border-radius: 50%;
    top: 8px;
}

.gift-box__bow::before {
    left: -12px;
}

.gift-box__bow::after {
    right: -12px;
}

.gift-box__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: linear-gradient(135deg, var(--v2-red), #c53030);
    border-radius: 0 0 8px 8px;
}

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

.sparkles {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
}

.sparkles span {
    display: inline-block;
    animation: sparkle 1.5s ease-in-out infinite;
}

.sparkles span:nth-child(2) {
    animation-delay: 0.3s;
}

.sparkles span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.santa-role-waiting__hint {
    color: var(--v2-text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

/* Santa Animation */
.santa-animation {
    display: inline-block;
    position: relative;
    padding: 20px;
}

.santa-silhouette {
    font-size: 64px;
    filter: blur(0);
    animation: santa-appear 3s ease-in-out infinite;
}

@keyframes santa-appear {
    0%, 100% {
        opacity: 0.3;
        filter: blur(2px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
}

.question-marks {
    position: absolute;
    top: 0;
    right: -10px;
    font-size: 20px;
    color: var(--v2-gold);
}

.question-marks span {
    display: block;
    animation: question-float 2s ease-in-out infinite;
}

.question-marks span:nth-child(2) {
    animation-delay: 0.4s;
}

.question-marks span:nth-child(3) {
    animation-delay: 0.8s;
}

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

/* Santa Preparing Animation */
.santa-preparing-animation {
    text-align: center;
    padding: 20px;
}

.workshop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.santa-working {
    font-size: 48px;
    animation: santa-work 1s ease-in-out infinite;
}

@keyframes santa-work {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

.tools {
    font-size: 20px;
    animation: tools-move 0.5s ease-in-out infinite alternate;
}

@keyframes tools-move {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-5px);
    }
}

.gift-in-progress {
    font-size: 32px;
    animation: gift-build 2s ease-in-out infinite;
}

@keyframes gift-build {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Ward Card — Карточка подопечного */
.ward-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.ward-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ward-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(245, 200, 66, 0.3);
}

.ward-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ward-card__avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--v2-gold), var(--v2-red));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.ward-card__name {
    font-size: 18px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 4px 0;
}

.ward-card__age {
    font-size: 13px;
    color: var(--v2-text-muted);
}

.ward-card__social {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ward-card__social-link {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.ward-card__social-link svg {
    width: 14px;
    height: 14px;
}

.ward-card__social-link--vk {
    color: #4a76a8;
}

.ward-card__social-link--inst {
    color: #e1306c;
}

.ward-card__social-link:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
}

.ward-card__details {
    margin-bottom: 16px;
}

.ward-card__detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ward-card__detail:last-child {
    border-bottom: none;
}

.ward-card__detail-icon {
    flex-shrink: 0;
}

.ward-card__detail-label {
    font-size: 13px;
    color: var(--v2-text-muted);
    flex-shrink: 0;
}

.ward-card__detail-value {
    font-size: 13px;
    color: var(--v2-text);
    word-break: break-word;
}

.ward-card__preferences {
    background: rgba(245, 200, 66, 0.05);
    border: 1px solid rgba(245, 200, 66, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.ward-card__preferences--empty {
    background: rgba(229, 62, 62, 0.05);
    border-color: rgba(229, 62, 62, 0.1);
}

.ward-card__preferences-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 8px 0;
}

.ward-card__preferences-text {
    font-size: 14px;
    color: var(--v2-text-secondary);
    margin: 0;
    line-height: 1.6;
    word-break: break-word;
}

.ward-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Send Gift CTA */
.send-gift-cta {
    text-align: center;
    margin-top: auto;
    padding-top: 20px;
}

.send-gift-cta__hint {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin-top: 12px;
}

/* Delivery Info */
.delivery-info {
    background: rgba(72, 187, 120, 0.05);
    border: 1px solid rgba(72, 187, 120, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.delivery-info__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 12px 0;
}

.delivery-info__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.delivery-info__row--full {
    flex-direction: column;
}

.delivery-info__label {
    font-size: 13px;
    color: var(--v2-text-muted);
    flex-shrink: 0;
}

.delivery-info__value {
    font-size: 13px;
    color: var(--v2-text);
}

.delivery-info__value--track {
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.delivery-info__comment {
    font-size: 13px;
    color: var(--v2-text-secondary);
    margin: 4px 0 0 0;
    line-height: 1.5;
}

/* Ward Received Success */
.ward-received-success {
    text-align: center;
    padding: 20px;
    background: rgba(72, 187, 120, 0.08);
    border-radius: 12px;
    margin-top: 16px;
}

.ward-received-success__icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.ward-received-success__text {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-green);
    margin: 0;
}

/* Santa Delivery Info (Recipient Role) */
.santa-delivery-info {
    background: rgba(72, 187, 120, 0.05);
    border: 1px solid rgba(72, 187, 120, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.santa-delivery-info__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 12px 0;
}

.santa-delivery-info__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.santa-delivery-info__row--full {
    flex-direction: column;
}

.santa-delivery-info__label {
    font-size: 13px;
    color: var(--v2-text-muted);
    flex-shrink: 0;
}

.santa-delivery-info__value {
    font-size: 13px;
    color: var(--v2-text);
}

.santa-delivery-info__value--track {
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.santa-delivery-info__message {
    margin-top: 8px;
}

.santa-message-bubble {
    background: rgba(245, 200, 66, 0.08);
    border: 1px solid rgba(245, 200, 66, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--v2-text);
    line-height: 1.5;
    position: relative;
}

.santa-message-bubble::before {
    content: '🎅';
    position: absolute;
    top: -10px;
    left: 16px;
    font-size: 20px;
}

.santa-delivery-info__hint {
    margin-top: 12px;
    padding: 12px;
    background: rgba(99, 179, 237, 0.05);
    border-radius: 8px;
}

.santa-delivery-info__hint p {
    margin: 0;
    font-size: 13px;
    color: var(--v2-text-secondary);
}

/* Дополнительные модификаторы для .v2-collapsible из components.css */
.v2-collapsible--warning .v2-collapsible__header {
    background: rgba(245, 200, 66, 0.05);
}

/* Rules Content */
.v2-rules-content {
    font-size: 14px;
    color: var(--v2-text-secondary);
    line-height: 1.7;
    padding: 8px 0;
}

.v2-rules-content p {
    margin-bottom: 12px;
}

.v2-rules-content ul,
.v2-rules-content ol {
    margin: 12px 0;
    padding-left: 20px;
}

.v2-rules-content li {
    margin-bottom: 6px;
}

/* Дополнительные модификаторы кнопок (базовые в components.css) */
.v2-btn--mega {
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
}

.v2-btn--glow {
    box-shadow: 0 0 20px rgba(245, 200, 66, 0.3);
    animation: btn-glow 2s ease-in-out infinite;
}

@keyframes btn-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(245, 200, 66, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(245, 200, 66, 0.5);
    }
}

.v2-btn--purple {
    background: linear-gradient(135deg, var(--v2-purple) 0%, #805ad5 100%);
    color: white;
}

.v2-btn--purple:hover {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
}

/* Дополнительные модификаторы для .v2-info-box из components.css */
.v2-info-box--small {
    padding: 10px 12px;
}

.v2-info-box--small .v2-info-box__icon {
    font-size: 14px;
}

.v2-info-box__content strong {
    color: var(--v2-text);
}

.v2-info-box__content ul {
    margin: 8px 0 0 0;
    padding-left: 16px;
}

.v2-info-box__content li {
    margin-bottom: 4px;
}

/* Profile Preview Widget */
.profile-preview-widget {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.95) 0%, rgba(20, 20, 40, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 24px;
}

.profile-preview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 0;
}

.profile-preview-header__icon {
    font-size: 32px;
}

.profile-preview-header__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0;
}

.profile-preview-body {
    padding: 24px;
}

.profile-preview-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin: 0px 20px;
}

.profile-preview-header__subtitle {
    color: var(--v2-text-muted);
    font-size: 14px;
    margin: 4px 0 0;
}

/* Profile Completeness */
.profile-completeness {
    padding: 16px 24px;
}

.profile-completeness__bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.profile-completeness__fill {
    height: 100%;
    background: var(--v2-gold);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.profile-completeness__fill--good {
    background: var(--v2-green);
}

.profile-completeness__fill--warning {
    background: var(--v2-orange);
}

.profile-completeness__text {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin-top: 8px;
}

.profile-completeness__hint {
    color: var(--v2-orange);
}

/* Profile Issues */
.profile-issues {
    padding: 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-issue {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}

.profile-issue--error {
    background: rgba(231, 81, 90, 0.15);
    color: var(--v2-red);
}

.profile-issue--warning {
    background: rgba(255, 183, 77, 0.15);
    color: var(--v2-orange);
}

.profile-issue__icon {
    font-size: 16px;
}

/* Profile Preview Card Inner Elements */
.profile-preview-card__header {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-preview-card__avatar {
    position: relative;
    flex-shrink: 0;
}

.profile-preview-card__avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--v2-gold);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}

.profile-preview-card__avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-gold), #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.profile-preview-card__avatar-warning {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background: var(--v2-bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid var(--v2-bg-card);
}

.profile-preview-card__info {
    flex: 1;
    min-width: 0;
}

.profile-preview-card__name {
    font-size: 18px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 4px;
}

.profile-preview-card__age {
    font-size: 13px;
    color: var(--v2-text-muted);
    display: block;
    margin-bottom: 10px;
}


/* ═══════════════════════════════════════════════════════════════════
   Стили для блока отмены участия администратором
   ═══════════════════════════════════════════════════════════════════ */

.v2-card-action.admin-cancelled {
    border-color: var(--v2-red);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.02) 100%);
}

.v2-action-admin-cancelled {
    text-align: center;
}

.v2-action-admin-cancelled .v2-action-icon.cancelled {
    font-size: 48px;
    margin-bottom: 16px;
}

.v2-action-admin-cancelled .v2-action-title {
    color: var(--v2-red);
}

.v2-admin-cancel-reason {
    margin: 20px 0;
    padding: 16px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 12px;
    text-align: left;
}

.v2-admin-cancel-reason-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--v2-red);
    font-size: 14px;
}

.v2-admin-cancel-reason-icon {
    font-size: 18px;
}

.v2-admin-cancel-reason-text {
    margin: 0;
    color: var(--v2-text);
    font-size: 14px;
    line-height: 1.6;
}

.v2-admin-cancel-help {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-admin-cancel-help p {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--v2-text-muted);
}

/* Light Theme */
.v2-theme-light .v2-card-action.admin-cancelled {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
}

.v2-theme-light .v2-admin-cancel-reason {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.06) 100%);
    border-color: rgba(220, 38, 38, 0.35);
}

.v2-theme-light .v2-admin-cancel-reason-text {
    color: #1a2332;
}

.v2-theme-light .v2-admin-cancel-help {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-admin-cancel-help p {
    color: #64748b;
}

/* Адаптивность */
@media (max-width: 576px) {
    .v2-admin-cancel-reason {
        padding: 12px;
    }

    .v2-admin-cancel-reason-header {
        font-size: 13px;
    }

    .v2-admin-cancel-reason-text {
        font-size: 13px;
    }
}

.profile-preview-card__empty {
    color: var(--v2-text-muted);
    font-style: italic;
}

/* Social Links in Profile Preview */
.profile-preview-card__social {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.profile-social-link {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-text-muted);
    transition: all 0.2s ease;
    text-decoration: none;
}

.profile-social-link:hover {
    background: var(--v2-gold);
    color: var(--v2-bg);
    transform: translateY(-2px);
}

.profile-social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.profile-social-link--vk:hover {
    background: #4680C2;
    color: white;
}

.profile-social-link--tg:hover {
    background: #229ED9;
    color: white;
}

.profile-social-link--inst:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
}

.profile-social-link--tiktok:hover {
    background: #010101;
    color: white;
}

/* Profile Preview Card Sections */
.profile-preview-card__section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-preview-card__section--warning {
    background: rgba(255, 183, 77, 0.08);
    margin: 16px -20px 0;
    padding: 16px 20px;
    border-top: none;
}

.profile-preview-card__section--highlight {
    background: rgba(212, 175, 55, 0.08);
    margin: 16px -20px 0;
    padding: 16px 20px;
    border-top: none;
}

.profile-preview-card__section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 12px;
}

.profile-preview-card__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-preview-card__detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
}

.profile-preview-card__detail-icon {
    flex-shrink: 0;
}

.profile-preview-card__detail-label {
    color: var(--v2-text-muted);
    flex-shrink: 0;
}

.profile-preview-card__detail-value {
    color: var(--v2-text);
    word-break: break-word;
}

.profile-preview-card__about-text {
    font-size: 14px;
    color: var(--v2-text);
    line-height: 1.6;
    margin: 0;
}

.profile-preview-card__wishlist-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--v2-gold);
    text-decoration: none;
    font-size: 14px;
    word-break: break-all;
}

.profile-preview-card__external-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Santa View Indicator */
.profile-preview-card__santa-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--v2-text-muted);
}

.santa-eye {
    animation: v2-blink 3s ease-in-out infinite;
}

@keyframes v2-blink {
    0%, 90%, 100% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
}

/* Profile Preview Actions */
.profile-preview-actions {
    padding: 20px 24px 24px;
    text-align: center;
}

.profile-preview-actions__hint {
    font-size: 12px;
    color: var(--v2-text-muted);
    margin: 12px 0 0;
}

.profile-preview-locked {
    padding: 20px 24px 24px;
    text-align: center;
}

.profile-preview-locked__icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.profile-preview-locked__text {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin: 0 0 16px;
}

/* Light Theme */
.v2-theme-light .profile-issue--error {
    background: rgba(231, 81, 90, 0.1);
}

.v2-theme-light .profile-issue--warning {
    background: rgba(255, 183, 77, 0.1);
}

.v2-theme-light .profile-social-link {
    background: rgba(0, 0, 0, 0.05);
}

.v2-theme-light .profile-preview-card__section--warning {
    background: rgba(255, 183, 77, 0.1);
}

.v2-theme-light .profile-preview-card__section--highlight {
    background: rgba(212, 175, 55, 0.1);
}

/* Exchange Progress Timeline */
.exchange-progress-timeline {
    position: relative;
    margin-top: 16px;
}

.exchange-progress-track {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    z-index: 0;
}

.exchange-progress-track__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--v2-green) 0%, var(--v2-gold) 100%);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.3);
}

.exchange-progress-stages {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.exchange-progress-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    max-width: 120px;
}

.exchange-progress-stage:first-child {
    align-items: flex-start;
}

.exchange-progress-stage:first-child .exchange-progress-stage__label {
    text-align: left;
}

.exchange-progress-stage:last-child {
    align-items: flex-end;
}

.exchange-progress-stage:last-child .exchange-progress-stage__label {
    text-align: right;
}

.exchange-progress-stage__marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: rgba(20, 20, 40, 0.95);
    border: 3px solid rgba(255, 255, 255, 0.15);
    color: var(--v2-text-muted);
    margin-bottom: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.exchange-progress-stage__marker svg {
    width: 14px;
    height: 14px;
}

.exchange-progress-stage--completed .exchange-progress-stage__marker {
    background: var(--v2-green);
    border-color: var(--v2-green);
    color: white;
    box-shadow: 0 0 12px rgba(72, 187, 120, 0.4);
}

.exchange-progress-stage--active .exchange-progress-stage__marker {
    background: var(--v2-gold);
    border-color: var(--v2-gold);
    color: var(--v2-bg-dark);
    box-shadow: 0 0 16px rgba(245, 200, 66, 0.5);
    animation: marker-glow 2s ease-in-out infinite;
}

.exchange-progress-stage__pulse {
    width: 10px;
    height: 10px;
    background: var(--v2-bg-dark);
    border-radius: 50%;
    animation: v2-pulse 1.5s ease-in-out infinite;
}

.exchange-progress-stage__label {
    text-align: center;
}

.exchange-progress-stage__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-text-secondary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.exchange-progress-stage__date {
    font-size: 11px;
    color: var(--v2-text-muted);
}

.exchange-progress-stage--completed .exchange-progress-stage__name {
    color: var(--v2-green);
}

.exchange-progress-stage--active .exchange-progress-stage__name {
    color: var(--v2-gold);
}

.exchange-progress-stage--pending {
    opacity: 0.6;
}

.exchange-progress-stage--pending .exchange-progress-stage__name {
    color: var(--v2-text-muted);
}

@keyframes marker-glow {
    0%, 100% {
        box-shadow: 0 0 16px rgba(245, 200, 66, 0.5);
    }
    50% {
        box-shadow: 0 0 24px rgba(245, 200, 66, 0.7);
    }
}

/* Exchange Countdown */
.exchange-countdown {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(245, 200, 66, 0.08);
    border: 1px solid rgba(245, 200, 66, 0.2);
    border-radius: 16px;
    padding: 16px 24px;
}

.exchange-countdown--urgent {
    background: rgba(229, 62, 62, 0.08);
    border-color: rgba(229, 62, 62, 0.3);
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: rgba(229, 62, 62, 0.3);
    }
    50% {
        border-color: rgba(229, 62, 62, 0.6);
    }
}

.exchange-countdown__icon {
    font-size: 32px;
}

.exchange-countdown__label {
    font-size: 12px;
    color: var(--v2-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exchange-countdown__time {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-gold);
}

.exchange-countdown--urgent .exchange-countdown__time {
    color: var(--v2-red);
}

/* Current Phase */
.exchange-current-phase {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.exchange-current-phase--gold {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.08) 0%, rgba(245, 200, 66, 0.02) 100%);
    border-left: 3px solid var(--v2-gold);
}

.exchange-current-phase--blue {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.08) 0%, rgba(99, 179, 237, 0.02) 100%);
    border-left: 3px solid var(--v2-ice-blue);
}

.exchange-current-phase--green {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.08) 0%, rgba(72, 187, 120, 0.02) 100%);
    border-left: 3px solid var(--v2-green);
}

.exchange-current-phase--purple {
    background: linear-gradient(135deg, rgba(159, 122, 234, 0.08) 0%, rgba(159, 122, 234, 0.02) 100%);
    border-left: 3px solid var(--v2-purple);
}

.exchange-current-phase__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text);
}

.exchange-current-phase__description {
    font-size: 14px;
    color: var(--v2-text-muted);
}

/* Light Theme for Participate Extended */
.v2-theme-light .profile-preview-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .profile-preview-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .ward-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .exchange-countdown {
    background: rgba(245, 200, 66, 0.12);
    border-color: rgba(245, 200, 66, 0.25);
}

.v2-theme-light .exchange-progress-stage__marker {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
}

.v2-theme-light .exchange-progress-track {
    background: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-quick-action {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Light theme для .v2-collapsible в components.css */

/* Responsive for Participate Extended */
@media (max-width: 991px) {
    .exchange-countdown {
        width: 100%;
        justify-content: center;
    }

    .exchange-progress-stages {
        flex-wrap: wrap;
        gap: 16px;
    }

    .exchange-progress-stage {
        flex: 0 0 auto;
        min-width: 80px;
    }
}

@media (max-width: 768px) {
    .delivery-type-options {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .exchange-progress-timeline {
        display: none;
    }

    .santa-role-header,
    .recipient-role-header {
        padding: 16px 16px 0;
    }

    .santa-role-body,
    .recipient-role-body {
        padding: 16px;
    }

    .exchange-status-widget {
        padding: 20px;
    }

    .exchange-status-hero__icon {
        font-size: 36px;
    }

    .exchange-status-hero__title {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .ward-card__header {
        flex-direction: column;
        text-align: center;
    }

    .ward-card__actions {
        flex-direction: column;
    }

    .ward-card__actions .v2-btn {
        width: 100%;
    }
}

/* ============================================================================
 * СЕКЦИЯ ПОМОЩИ САНТЫ — Контакты для связи
 * ============================================================================ */

.santa-help-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    text-align: center;
}

.santa-help-btn {
    font-size: 13px;
}

/* Контакты в модальном окне */
.santa-contacts-intro {
    color: var(--v2-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.santa-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.santa-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.santa-contact-item:hover {
    border-color: var(--v2-gold);
    background: rgba(245, 200, 66, 0.05);
}

.santa-contact-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--v2-radius-md);
    flex-shrink: 0;
    transition: all var(--v2-duration-fast) var(--v2-ease-smooth);
}

.santa-contact-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    color: var(--v2-text-muted);
    transition: color var(--v2-duration-fast) var(--v2-ease-smooth);
}

.santa-contact-item:hover .santa-contact-icon {
    background: rgba(245, 200, 66, 0.15);
}

.santa-contact-item:hover .santa-contact-icon svg {
    color: var(--v2-gold);
}

.santa-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.santa-contact-label {
    font-size: 12px;
    color: var(--v2-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.santa-contact-value {
    color: var(--v2-gold);
    font-weight: 500;
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
}

.santa-contact-value:hover {
    color: var(--v2-gold-light);
    text-decoration: underline;
}

.santa-contacts-notice {
    padding: 14px 16px;
    background: rgba(245, 200, 66, 0.08);
    border-radius: var(--v2-radius-md);
    border-left: 3px solid var(--v2-gold);
}

.santa-contacts-notice p {
    margin: 0;
    font-size: 13px;
    color: var(--v2-text-muted);
    line-height: 1.5;
}

/* Light theme */
.v2-theme-light .santa-help-section {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.v2-theme-light .santa-contact-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .santa-contact-item:hover {
    background: rgba(245, 200, 66, 0.08);
    border-color: var(--v2-gold);
}

.v2-theme-light .santa-contact-icon {
    background: rgba(0, 0, 0, 0.05);
}

.v2-theme-light .santa-contact-icon svg {
    color: var(--v2-text-muted);
}

.v2-theme-light .santa-contact-item:hover .santa-contact-icon {
    background: rgba(245, 200, 66, 0.15);
}

.v2-theme-light .santa-contact-item:hover .santa-contact-icon svg {
    color: var(--v2-gold);
}

.v2-theme-light .santa-contacts-notice {
    background: rgba(245, 200, 66, 0.1);
}

/* Responsive */
@media (max-width: 480px) {
    .santa-contact-item {
        padding: 12px;
    }

    .santa-contact-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}