/* /Components/Pages/Account/Login.razor.rz.scp.css */
.login-container[b-abx1idulq7] {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.login-card[b-abx1idulq7] {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    max-width: 450px;
    width: 100%;
}

.login-header[b-abx1idulq7] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo[b-abx1idulq7] {
    max-width: 200px;
    margin-bottom: 1.5rem;
}

.login-header h2[b-abx1idulq7] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1E293B;
}

.login-header p[b-abx1idulq7] {
    margin: 0;
    color: #64748B;
    font-size: 1rem;
}

.form-group[b-abx1idulq7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.form-control[b-abx1idulq7] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #E0E6EB;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}

    .form-control:focus[b-abx1idulq7] {
        outline: none;
        border-color: #70AFFB;
        box-shadow: 0 0 0 3px rgba(112, 175, 251, 0.1);
    }

.btn[b-abx1idulq7] {
    transition: all 0.2s;
}

    .btn:hover[b-abx1idulq7] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

.login-footer[b-abx1idulq7] {
    margin-top: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .login-footer a:hover[b-abx1idulq7] {
        text-decoration: underline !important;
    }

/* Responsive */
@media (max-width: 640px) {
    .login-container[b-abx1idulq7] {
        align-items: flex-start;
        padding: 1rem 0.75rem 2rem;
    }

    .login-card[b-abx1idulq7] {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .login-logo[b-abx1idulq7] {
        max-width: 150px;
    }

    .login-header h2[b-abx1idulq7] {
        font-size: 1.5rem;
    }

    .form-group[b-abx1idulq7] {
        margin-bottom: 0.75rem;
    }
}
/* /Components/Pages/ActivityFeature/Pages/ActivityPage.razor.rz.scp.css */
.activity-page-container[b-ikkzusz0d9] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.activity-page-header[b-ikkzusz0d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.activity-page-title[b-ikkzusz0d9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .activity-page-title i.rzi[b-ikkzusz0d9] {
        color: #70AFFB;
        font-size: 2rem;
    }

.filter-controls[b-ikkzusz0d9] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #E8EDF2;
    margin-bottom: 1.5rem;
}

.filter-section[b-ikkzusz0d9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 180px;
}

.filter-label[b-ikkzusz0d9] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
}

.activity-stats-bar[b-ikkzusz0d9] {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

.stat-pill[b-ikkzusz0d9] {
    background: white;
    border: 1px solid #E8EDF2;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 120px;
}

.stat-pill-icon[b-ikkzusz0d9] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-pill-content[b-ikkzusz0d9] {
    display: flex;
    flex-direction: column;
}

.stat-pill-value[b-ikkzusz0d9] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.stat-pill-label[b-ikkzusz0d9] {
    font-size: 0.7rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.no-fighters-message[b-ikkzusz0d9] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #E8EDF2;
}

    .no-fighters-message i.rzi[b-ikkzusz0d9] {
        font-size: 64px;
        color: #CBD5E1;
        margin-bottom: 1rem;
    }

    .no-fighters-message h4[b-ikkzusz0d9] {
        color: #1E293B;
        margin-bottom: 0.5rem;
    }

    .no-fighters-message p[b-ikkzusz0d9] {
        color: #64748B;
        margin-bottom: 1.5rem;
    }

@media (max-width: 768px) {
    .activity-page-header[b-ikkzusz0d9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-controls[b-ikkzusz0d9] {
        flex-direction: column;
    }

    .filter-section[b-ikkzusz0d9] {
        min-width: 100%;
    }

    .activity-stats-bar[b-ikkzusz0d9] {
        flex-direction: column;
    }

    .stat-pill[b-ikkzusz0d9] {
        min-width: 100%;
    }
}
/* /Components/Pages/Administration/Pages/Administration.razor.rz.scp.css */
/* ============================================
   ADMIN PANEL - MODERN MOBILE-FIRST STYLES
   ============================================ */

.admin-page[b-1ffgeaxloc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ===== HEADER ===== */
.admin-header[b-1ffgeaxloc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.admin-header-icon[b-1ffgeaxloc] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-header-icon[b-1ffgeaxloc]  .rzi {
    font-size: 28px;
    color: white;
}

.admin-header-text h1[b-1ffgeaxloc] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.admin-header-text p[b-1ffgeaxloc] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #64748B;
}

/* ===== QUICK STATS ROW ===== */
.admin-stats-row[b-1ffgeaxloc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.admin-stat[b-1ffgeaxloc] {
    background: white;
    border-radius: 12px;
    padding: 0.875rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
}

.admin-stat:hover[b-1ffgeaxloc] {
    border-color: #70AFFB;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(112, 175, 251, 0.15);
}

.admin-stat[b-1ffgeaxloc]  .rzi {
    font-size: 22px;
    color: #70AFFB;
}

.admin-stat.error[b-1ffgeaxloc]  .rzi {
    color: #DC2626;
}

.stat-value[b-1ffgeaxloc] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

.admin-stat.error .stat-value[b-1ffgeaxloc] {
    color: #DC2626;
}

.stat-label[b-1ffgeaxloc] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

/* ===== SECTIONS ===== */
.admin-section[b-1ffgeaxloc] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.admin-section-title[b-1ffgeaxloc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-section-title[b-1ffgeaxloc]  .rzi {
    font-size: 18px;
    color: #94A3B8;
}

/* ===== CARD GRID ===== */
.admin-grid[b-1ffgeaxloc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== ADMIN CARDS ===== */
.admin-card[b-1ffgeaxloc] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.admin-card:hover[b-1ffgeaxloc] {
    border-color: #70AFFB;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(112, 175, 251, 0.15);
}

.admin-card:active[b-1ffgeaxloc] {
    transform: scale(0.98);
}

.admin-card-icon[b-1ffgeaxloc] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-card-icon[b-1ffgeaxloc]  .rzi {
    font-size: 24px;
    color: white;
}

/* Icon color variants */
.admin-card-icon.users[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.admin-card-icon.orgs[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.admin-card-icon.support[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.admin-card-icon.logs[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.admin-card-icon.features[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.admin-card-icon.notifications[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.admin-card-icon.gamification[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%);
}

.admin-card-icon.stripe[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #635bff 0%, #a259ff 100%);
}

.admin-card-icon.design[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #F97316 0%, #EF4444 100%);
}

.admin-card-icon.seasons[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.admin-card-icon.challenges[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.admin-card-icon.badges[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #ffd93d 0%, #ff9800 100%);
}

.admin-card-content[b-1ffgeaxloc] {
    flex: 1;
    min-width: 0;
}

.admin-card-content h4[b-1ffgeaxloc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
}

.admin-card-content p[b-1ffgeaxloc] {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-card-arrow[b-1ffgeaxloc] {
    color: #CBD5E1;
    font-size: 20px;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}

.admin-card:hover .admin-card-arrow[b-1ffgeaxloc] {
    color: #70AFFB;
    transform: translateX(2px);
}

/* ===== QUICK ACTIONS CARD ===== */
.admin-actions-card[b-1ffgeaxloc] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.action-row[b-1ffgeaxloc] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.action-row:hover[b-1ffgeaxloc] {
    background: #F8FAFC;
}

.action-row:active[b-1ffgeaxloc] {
    background: #F1F5F9;
}

.action-icon[b-1ffgeaxloc] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-icon[b-1ffgeaxloc]  .rzi {
    font-size: 22px;
    color: white;
}

.action-icon.rescore[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
}

.action-icon.settings[b-1ffgeaxloc] {
    background: linear-gradient(135deg, #6B7280 0%, #374151 100%);
}

.action-content[b-1ffgeaxloc] {
    flex: 1;
    min-width: 0;
}

.action-content h5[b-1ffgeaxloc] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
}

.action-content p[b-1ffgeaxloc] {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #64748B;
}

.action-go[b-1ffgeaxloc] {
    color: #CBD5E1;
    font-size: 20px;
    flex-shrink: 0;
}

.action-row:hover .action-go[b-1ffgeaxloc] {
    color: #70AFFB;
}

.action-divider[b-1ffgeaxloc] {
    height: 1px;
    background: #E2E8F0;
    margin: 0 1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .admin-stats-row[b-1ffgeaxloc] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-value[b-1ffgeaxloc] {
        font-size: 1.25rem;
    }
}

@media (min-width: 640px) {
    .admin-grid[b-1ffgeaxloc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .admin-card[b-1ffgeaxloc] {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .admin-card-content p[b-1ffgeaxloc] {
        white-space: normal;
    }

    .admin-card-arrow[b-1ffgeaxloc] {
        display: none;
    }

    .admin-card-icon[b-1ffgeaxloc] {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .admin-card-icon[b-1ffgeaxloc]  .rzi {
        font-size: 28px;
    }
}

@media (min-width: 768px) {
    .admin-page[b-1ffgeaxloc] {
        padding: 2rem;
    }

    .admin-header-icon[b-1ffgeaxloc] {
        width: 64px;
        height: 64px;
    }

    .admin-header-icon[b-1ffgeaxloc]  .rzi {
        font-size: 32px;
    }

    .admin-header-text h1[b-1ffgeaxloc] {
        font-size: 1.75rem;
    }
    
    .stat-value[b-1ffgeaxloc] {
        font-size: 1.75rem;
    }
}
/* /Components/Pages/Administration/Pages/BadgeManager.razor.rz.scp.css */
.badge-manager-page[b-vwb9lwsn64] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== HEADER ===== */
.page-header[b-vwb9lwsn64] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h1[b-vwb9lwsn64] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--rz-text-color);
}

.header-content p[b-vwb9lwsn64] {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.header-actions[b-vwb9lwsn64] {
    display: flex;
    gap: 0.5rem;
}

/* ===== FILTERS ===== */
.filters-bar[b-vwb9lwsn64] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--rz-base-200);
    border-radius: 10px;
}

.filter-chips[b-vwb9lwsn64] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-chip[b-vwb9lwsn64] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 20px;
    background: var(--rz-panel-background-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-vwb9lwsn64] {
    border-color: var(--rz-primary);
}

.filter-chip.active[b-vwb9lwsn64] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: white;
}

/* Tier-specific chip colors */
.filter-chip.tier-common.active[b-vwb9lwsn64] { background: #9e9e9e; border-color: #9e9e9e; }
.filter-chip.tier-uncommon.active[b-vwb9lwsn64] { background: #4caf50; border-color: #4caf50; }
.filter-chip.tier-rare.active[b-vwb9lwsn64] { background: #2196f3; border-color: #2196f3; }
.filter-chip.tier-epic.active[b-vwb9lwsn64] { background: #9c27b0; border-color: #9c27b0; }
.filter-chip.tier-legendary.active[b-vwb9lwsn64] { background: #ff9800; border-color: #ff9800; }

.filter-toggles[b-vwb9lwsn64] {
    display: flex;
    gap: 1rem;
}

.toggle-filter[b-vwb9lwsn64] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ===== LOADING STATE ===== */
.loading-state[b-vwb9lwsn64] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--rz-text-secondary-color);
}

.loading-state p[b-vwb9lwsn64] {
    margin-top: 1rem;
}

/* ===== BADGES GRID ===== */
.badges-grid[b-vwb9lwsn64] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ===== BADGE CARD ===== */
.badge-card[b-vwb9lwsn64] {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-card:hover[b-vwb9lwsn64] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tier border colors */
.badge-card.tier-common[b-vwb9lwsn64] { border-top: 3px solid #9e9e9e; }
.badge-card.tier-uncommon[b-vwb9lwsn64] { border-top: 3px solid #4caf50; }
.badge-card.tier-rare[b-vwb9lwsn64] { border-top: 3px solid #2196f3; }
.badge-card.tier-epic[b-vwb9lwsn64] { border-top: 3px solid #9c27b0; }
.badge-card.tier-legendary[b-vwb9lwsn64] { border-top: 3px solid #ff9800; }

/* Badge Header */
.badge-header[b-vwb9lwsn64] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1rem 0 1rem;
}

.badge-icon[b-vwb9lwsn64] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--rz-base-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.badge-tier-tag[b-vwb9lwsn64] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--rz-base-300);
    color: var(--rz-text-secondary-color);
}

.tier-common .badge-tier-tag[b-vwb9lwsn64] { background: #e0e0e0; color: #616161; }
.tier-uncommon .badge-tier-tag[b-vwb9lwsn64] { background: #c8e6c9; color: #2e7d32; }
.tier-rare .badge-tier-tag[b-vwb9lwsn64] { background: #bbdefb; color: #1565c0; }
.tier-epic .badge-tier-tag[b-vwb9lwsn64] { background: #e1bee7; color: #7b1fa2; }
.tier-legendary .badge-tier-tag[b-vwb9lwsn64] { background: #ffe0b2; color: #e65100; }

/* Badge Content */
.badge-content[b-vwb9lwsn64] {
    padding: 1rem;
}

.badge-content h3[b-vwb9lwsn64] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.badge-slug[b-vwb9lwsn64] {
    display: block;
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.5rem;
}

.badge-description[b-vwb9lwsn64] {
    margin: 0 0 0.75rem 0;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badge Meta */
.badge-meta[b-vwb9lwsn64] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-item[b-vwb9lwsn64] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    background: var(--rz-base-200);
    border-radius: 4px;
    color: var(--rz-text-secondary-color);
}

.meta-item .rzi[b-vwb9lwsn64] {
    font-size: 0.9rem;
}

.meta-item.coach[b-vwb9lwsn64] {
    background: #e3f2fd;
    color: #1565c0;
}

.meta-item.admin[b-vwb9lwsn64] {
    background: #fce4ec;
    color: #c2185b;
}

/* Badge Tracking */
.badge-tracking[b-vwb9lwsn64] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-border-color);
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.badge-tracking .rzi[b-vwb9lwsn64] {
    font-size: 1rem;
}

/* Badge Actions */
.badge-actions[b-vwb9lwsn64] {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--rz-base-100);
    border-top: 1px solid var(--rz-border-color);
}

/* ===== EMPTY STATE ===== */
.empty-state[b-vwb9lwsn64] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--rz-panel-background-color);
    border: 2px dashed var(--rz-border-color);
    border-radius: 12px;
}

.empty-state .rzi[b-vwb9lwsn64] {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 1rem;
}

.empty-state h3[b-vwb9lwsn64] {
    margin: 0 0 0.5rem 0;
    color: var(--rz-text-color);
}

.empty-state p[b-vwb9lwsn64] {
    margin: 0 0 1.5rem 0;
    color: var(--rz-text-secondary-color);
}

/* ===== STATS SECTION ===== */
.stats-section[b-vwb9lwsn64] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--rz-base-200);
    border-radius: 12px;
}

.stats-section h3[b-vwb9lwsn64] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--rz-text-color);
}

.stats-grid[b-vwb9lwsn64] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.stat-card[b-vwb9lwsn64] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--rz-panel-background-color);
    border-radius: 8px;
}

.stat-value[b-vwb9lwsn64] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-primary);
}

.stat-label[b-vwb9lwsn64] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .badge-manager-page[b-vwb9lwsn64] {
        padding: 1rem;
    }

    .page-header[b-vwb9lwsn64] {
        flex-direction: column;
    }

    .header-actions[b-vwb9lwsn64] {
        width: 100%;
    }

    .header-actions .rz-button[b-vwb9lwsn64] {
        flex: 1;
    }

    .filters-bar[b-vwb9lwsn64] {
        flex-direction: column;
        align-items: flex-start;
    }

    .badges-grid[b-vwb9lwsn64] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Administration/Pages/DashboardDesignIdeas.razor.rz.scp.css */
/* ============================================
   DASHBOARD DESIGN LAB
   Mockups for fighter header exploration
   ============================================ */

/* ?? PAGE SCAFFOLD ?? */
.design-lab[b-2uhbl8ws8t] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lab-header[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lab-header-icon[b-2uhbl8ws8t] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #F97316, #EF4444);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lab-header-icon[b-2uhbl8ws8t]  .rzi { font-size: 26px; color: white; }

.lab-header-text h1[b-2uhbl8ws8t] { margin: 0; font-size: 1.4rem; font-weight: 700; color: #1E293B; }
.lab-header-text p[b-2uhbl8ws8t] { margin: 0.2rem 0 0; font-size: 0.85rem; color: #64748B; }

.lab-controls[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lab-toggle[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toggle-label[b-2uhbl8ws8t] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748B;
    margin-right: 0.25rem;
}

/* ?? DESIGN CARD WRAPPER ?? */
.design-card[b-2uhbl8ws8t] {
    background: white;
    border-radius: 16px;
    border: 1px solid #E0E6EB;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.design-label[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.15rem;
    background: #F8F9FB;
    border-bottom: 1px solid #E0E6EB;
    flex-wrap: wrap;
}

.design-badge[b-2uhbl8ws8t] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.design-name[b-2uhbl8ws8t] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1E293B;
}

.design-desc[b-2uhbl8ws8t] {
    font-size: 0.78rem;
    color: #64748B;
    flex-basis: 100%;
    margin-top: 0.1rem;
}

.design-preview[b-2uhbl8ws8t] {
    padding: 1.25rem;
    background: #0F172A;
}

.design-preview.preview-light[b-2uhbl8ws8t] {
    background: #F1F5F9;
}


/* ????????????????????????????????????????????
   DESIGN A � Current (Baseline)
   ???????????????????????????????????????????? */

.hdr-a[b-2uhbl8ws8t] {
    background: linear-gradient(135deg, #191A2F 0%, #193153 50%, #10335E 100%);
    border-radius: 20px;
    padding: 1.25rem;
    color: white;
    border: 1px solid rgba(112,175,251,0.15);
}

.hdr-a-identity[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.hdr-a-avatar[b-2uhbl8ws8t] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3);
}

.hdr-a-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.hdr-a-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.35rem; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-a-sub1[b-2uhbl8ws8t] { font-size: 0.88rem; color: rgba(255,255,255,0.7); display: block; }
.hdr-a-sub2[b-2uhbl8ws8t] { font-size: 0.78rem; color: gold; display: block; }

/* Readiness */
.hdr-a-readiness[b-2uhbl8ws8t] {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.hdr-a-readiness-display[b-2uhbl8ws8t] { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.hdr-a-readiness-val[b-2uhbl8ws8t] { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.hdr-a-pct[b-2uhbl8ws8t] { font-size: 1.2rem; font-weight: 600; opacity: 0.85; }
.hdr-a-readiness-label[b-2uhbl8ws8t] { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); }

.hdr-a-bar[b-2uhbl8ws8t] { height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.hdr-a-bar-fill[b-2uhbl8ws8t] { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.hdr-a-bar-fill.color-info[b-2uhbl8ws8t] { background: linear-gradient(90deg, #3B82F6, #70AFFB); }
.hdr-a-bar-fill.color-success[b-2uhbl8ws8t] { background: linear-gradient(90deg, #22C55E, #4ADE80); }

.hdr-a-hint[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 500; opacity: 0.85; }
.hdr-a-hint[b-2uhbl8ws8t]  .rzi { font-size: 14px; }

.color-info[b-2uhbl8ws8t] { color: #70AFFB; }
.color-success[b-2uhbl8ws8t] { color: #4ADE80; }
.color-warning[b-2uhbl8ws8t] { color: #FBBF24; }
.color-danger[b-2uhbl8ws8t] { color: #F87171; }

/* Camp */
.hdr-a-camp[b-2uhbl8ws8t] {
    text-align: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(251,146,60,0.1));
    border-radius: 12px;
    border: 1px solid rgba(239,68,68,0.25);
}

.hdr-a-camp-badge[b-2uhbl8ws8t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    background: linear-gradient(135deg, #EF4444, #F97316);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    margin-bottom: 0.35rem;
}

.hdr-a-camp-badge[b-2uhbl8ws8t]  .rzi { font-size: 12px; }
.hdr-a-camp-name[b-2uhbl8ws8t] { display: block; font-size: 0.95rem; font-weight: 600; color: white; opacity: 0.9; margin-bottom: 0.6rem; }

.hdr-a-camp-stats[b-2uhbl8ws8t] { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.4rem; margin-bottom: 0.6rem; }
.hdr-a-camp-stat[b-2uhbl8ws8t] { display: flex; flex-direction: column; align-items: center; padding: 0.4rem; background: rgba(255,255,255,0.05); border-radius: 8px; }
.hdr-a-camp-stat.countdown[b-2uhbl8ws8t] { background: rgba(239,68,68,0.15); }
.hdr-a-camp-stat .val[b-2uhbl8ws8t] { font-size: 1.4rem; font-weight: 800; color: white; line-height: 1; }
.hdr-a-camp-stat.countdown .val[b-2uhbl8ws8t] { color: #FB923C; }
.hdr-a-camp-stat .sub[b-2uhbl8ws8t] { font-size: 0.85rem; font-weight: 500; opacity: 0.6; }
.hdr-a-camp-stat .lbl[b-2uhbl8ws8t] { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); margin-top: 0.1rem; }

.hdr-a-camp-fill[b-2uhbl8ws8t] { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #EF4444, #F97316, #FBBF24); }

.hdr-a-camp-info[b-2uhbl8ws8t] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.5rem; }
.hdr-a-camp-info span[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.7); }
.hdr-a-camp-info[b-2uhbl8ws8t]  .rzi { font-size: 14px; opacity: 0.7; }

/* Metrics */
.hdr-a-metrics[b-2uhbl8ws8t] { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; margin-bottom: 1rem; }
.hdr-a-metric[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 0.4rem; background: rgba(255,255,255,0.05); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.hdr-a-metric .val[b-2uhbl8ws8t] { font-size: 1.1rem; font-weight: 700; color: white; line-height: 1; display: block; }
.hdr-a-metric .lbl[b-2uhbl8ws8t] { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: rgba(255,255,255,0.5); display: block; margin-top: 0.05rem; }

.hdr-a-metric-icon[b-2uhbl8ws8t] { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hdr-a-metric-icon[b-2uhbl8ws8t]  .rzi { font-size: 14px; color: rgba(255,255,255,0.7); }
.hdr-a-metric-icon.xp[b-2uhbl8ws8t] { background: rgba(251,191,36,0.15); }
.hdr-a-metric-icon.xp[b-2uhbl8ws8t]  .rzi { color: #FBBF24; }
.hdr-a-metric-icon.fire[b-2uhbl8ws8t] { background: rgba(251,146,60,0.15); }
.hdr-a-metric-icon.fire[b-2uhbl8ws8t]  .rzi { color: #FB923C; }

/* Actions */
.hdr-a-actions[b-2uhbl8ws8t] { display: flex; flex-direction: column; gap: 0.4rem; }
.hdr-a-btn[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.15s ease; }
.hdr-a-btn.primary[b-2uhbl8ws8t] { background: #b93b3b; color: white; padding: 0.7rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.hdr-a-btn.primary:hover[b-2uhbl8ws8t] { filter: brightness(1.1); }
.hdr-a-btn.secondary[b-2uhbl8ws8t] { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); padding: 0.6rem; border: 2px solid rgba(255,255,255,0.5); }
.hdr-a-btn.secondary:hover[b-2uhbl8ws8t] { background: rgba(255,255,255,0.1); }
.hdr-a-btn[b-2uhbl8ws8t]  .rzi { font-size: 18px; }


/* ????????????????????????????????????????????
   DESIGN B � Split Hero
   ???????????????????????????????????????????? */

.hdr-b[b-2uhbl8ws8t] {
    background: linear-gradient(145deg, #0F172A 0%, #1a202c 40%, #1E3A5F 100%);
    border-radius: 20px;
    padding: 1.25rem;
    color: white;
    border: 1px solid rgba(112,175,251,0.12);
}

.hdr-b-top[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hdr-b-left[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }

.hdr-b-avatar[b-2uhbl8ws8t] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.hdr-b-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.hdr-b-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-b-sub[b-2uhbl8ws8t] { font-size: 0.78rem; color: rgba(255,255,255,0.6); display: block; margin-top: 0.1rem; }

.hdr-b-tags[b-2uhbl8ws8t] { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.hdr-b-tag[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; background: rgba(255,255,255,0.08); border-radius: 999px; font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.hdr-b-tag[b-2uhbl8ws8t]  .rzi { font-size: 12px; color: #FB923C; }
.hdr-b-tag.level[b-2uhbl8ws8t]  .rzi { color: #FBBF24; }

.hdr-b-right[b-2uhbl8ws8t] { flex-shrink: 0; }

/* Gauge ring */
.hdr-b-gauge[b-2uhbl8ws8t] { position: relative; width: 88px; height: 88px; }
.hdr-b-ring[b-2uhbl8ws8t] { width: 88px; height: 88px; transform: rotate(-90deg); }
.hdr-b-gauge-text[b-2uhbl8ws8t] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hdr-b-gauge-val[b-2uhbl8ws8t] { font-size: 1.3rem; font-weight: 800; color: white; line-height: 1; }
.hdr-b-gauge-label[b-2uhbl8ws8t] { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-top: 0.15rem; }

/* Camp box (replaces gauge) */
.hdr-b-camp-box[b-2uhbl8ws8t] { width: 88px; text-align: center; padding: 0.6rem 0.4rem; background: rgba(239,68,68,0.12); border-radius: 14px; border: 1px solid rgba(239,68,68,0.25); }
.hdr-b-camp-badge[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #FB923C; margin-bottom: 0.3rem; }
.hdr-b-camp-badge[b-2uhbl8ws8t]  .rzi { font-size: 11px; }
.hdr-b-camp-countdown .big[b-2uhbl8ws8t] { font-size: 1.5rem; font-weight: 800; display: block; line-height: 1; }
.hdr-b-camp-countdown .unit[b-2uhbl8ws8t] { font-size: 0.6rem; color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 600; }
.hdr-b-camp-progress[b-2uhbl8ws8t] { margin-top: 0.4rem; }
.hdr-b-camp-bar[b-2uhbl8ws8t] { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.hdr-b-camp-fill[b-2uhbl8ws8t] { height: 100%; background: linear-gradient(90deg, #EF4444, #F97316); border-radius: 2px; }
.hdr-b-camp-pct[b-2uhbl8ws8t] { font-size: 0.58rem; color: rgba(255,255,255,0.5); margin-top: 0.15rem; display: block; }

/* Stat strip */
.hdr-b-strip[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0.6rem 0;
    margin-bottom: 0.85rem;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}

.hdr-b-stat[b-2uhbl8ws8t] { text-align: center; }
.hdr-b-stat .val[b-2uhbl8ws8t] { font-size: 1.05rem; font-weight: 700; display: block; line-height: 1; }
.hdr-b-stat .lbl[b-2uhbl8ws8t] { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: rgba(255,255,255,0.45); display: block; margin-top: 0.1rem; }
.hdr-b-divider[b-2uhbl8ws8t] { width: 1px; height: 28px; background: rgba(255,255,255,0.1); }

/* Actions */
.hdr-b-actions[b-2uhbl8ws8t] { display: flex; gap: 0.5rem; }
.hdr-b-btn[b-2uhbl8ws8t] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem 0.4rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.78rem; cursor: pointer; transition: all 0.15s ease; }
.hdr-b-btn:hover[b-2uhbl8ws8t] { background: rgba(255,255,255,0.1); }
.hdr-b-btn.primary[b-2uhbl8ws8t] { background: #70AFFB; color: #0F172A; border-color: #70AFFB; }
.hdr-b-btn.primary:hover[b-2uhbl8ws8t] { filter: brightness(1.1); }
.hdr-b-btn[b-2uhbl8ws8t]  .rzi { font-size: 16px; }


/* ????????????????????????????????????????????
   DESIGN C � Command Center
   ???????????????????????????????????????????? */

.hdr-c[b-2uhbl8ws8t] {
    background: #1a202c;
    border-radius: 0;
    color: white;
    overflow: hidden;
}

.hdr-c-banner[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, #1a202c, #1E3A5F);
}

.hdr-c-identity[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }

.hdr-c-avatar[b-2uhbl8ws8t] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F97316, #EF4444);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.hdr-c-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.hdr-c-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-c-role[b-2uhbl8ws8t] { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

.hdr-c-readiness-inline[b-2uhbl8ws8t] { flex-shrink: 0; text-align: right; }
.hdr-c-readiness-wrap[b-2uhbl8ws8t] { display: flex; align-items: baseline; gap: 0.15rem; }
.hdr-c-readiness-num[b-2uhbl8ws8t] { font-size: 2.2rem; font-weight: 800; color: #70AFFB; line-height: 1; }
.hdr-c-readiness-meta[b-2uhbl8ws8t] { display: flex; flex-direction: column; }
.hdr-c-readiness-pct[b-2uhbl8ws8t] { font-size: 0.9rem; font-weight: 700; color: #70AFFB; line-height: 1; }
.hdr-c-readiness-lbl[b-2uhbl8ws8t] { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); }

.hdr-c-camp-inline[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.5rem; }
.hdr-c-camp-tag[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.5rem; background: linear-gradient(135deg, #EF4444, #F97316); border-radius: 6px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.hdr-c-camp-tag[b-2uhbl8ws8t]  .rzi { font-size: 12px; }
.hdr-c-camp-days[b-2uhbl8ws8t] { font-size: 1.5rem; font-weight: 800; color: #FB923C; }

/* Full-width bar */
.hdr-c-bar-full[b-2uhbl8ws8t] { padding: 0.5rem 1.25rem 0.65rem; background: rgba(255,255,255,0.03); display: flex; align-items: center; gap: 0.75rem; }
.hdr-c-bar-track[b-2uhbl8ws8t] { flex: 1; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.hdr-c-bar-fill[b-2uhbl8ws8t] { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3B82F6, #70AFFB); }
.hdr-c-bar-fill.camp[b-2uhbl8ws8t] { background: linear-gradient(90deg, #EF4444, #F97316); }
.hdr-c-bar-hint[b-2uhbl8ws8t] { font-size: 0.7rem; color: rgba(255,255,255,0.5); white-space: nowrap; display: flex; align-items: center; gap: 0.25rem; }
.hdr-c-bar-hint[b-2uhbl8ws8t]  .rzi { font-size: 13px; }

/* Stat cards */
.hdr-c-stats[b-2uhbl8ws8t] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 0;
}

.hdr-c-stat-card[b-2uhbl8ws8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.3rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #E0E6EB;
}

.hdr-c-stat-card[b-2uhbl8ws8t]  .rzi { font-size: 18px; color: #70AFFB; margin-bottom: 0.25rem; }
.hdr-c-stat-card .val[b-2uhbl8ws8t] { font-size: 1.1rem; font-weight: 800; color: #1E293B; line-height: 1; }
.hdr-c-stat-card .lbl[b-2uhbl8ws8t] { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; color: #94A3B8; margin-top: 0.1rem; }

/* Quick action row */
.hdr-c-quick[b-2uhbl8ws8t] {
    display: flex;
    gap: 0.4rem;
    padding: 0.85rem 1.25rem 1rem;
}

.hdr-c-action[b-2uhbl8ws8t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 0.3rem;
    background: #F8F9FB;
    border: 1px solid #E0E6EB;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hdr-c-action:hover[b-2uhbl8ws8t] { background: #EFF6FF; border-color: #70AFFB; }
.hdr-c-action[b-2uhbl8ws8t]  .rzi { font-size: 20px; color: #32677E; }
.hdr-c-action span[b-2uhbl8ws8t] { font-size: 0.62rem; font-weight: 600; color: #64748B; text-transform: uppercase; }


/* ????????????????????????????????????????????
   DESIGN D � Athletic Card (Light)
   ???????????????????????????????????????????? */

.hdr-d[b-2uhbl8ws8t] {
    background: white;
    border-radius: 18px;
    padding: 1.25rem;
    border: 1px solid #E0E6EB;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.hdr-d-top[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

.hdr-d-avatar-ring[b-2uhbl8ws8t] { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.hdr-d-ring-svg[b-2uhbl8ws8t] { width: 72px; height: 72px; transform: rotate(-90deg); }
.hdr-d-avatar-inner[b-2uhbl8ws8t] {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a202c, #32677E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: white;
}

.hdr-d-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.hdr-d-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.15rem; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-d-sub[b-2uhbl8ws8t] { font-size: 0.78rem; color: #64748B; display: block; margin-top: 0.1rem; }

.hdr-d-readiness-row[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }
.hdr-d-readiness-pct[b-2uhbl8ws8t] { font-size: 0.88rem; font-weight: 800; color: #70AFFB; }
.hdr-d-readiness-hint[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: #64748B; }
.hdr-d-readiness-hint[b-2uhbl8ws8t]  .rzi { font-size: 14px; color: #70AFFB; }

.hdr-d-camp-row[b-2uhbl8ws8t] { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.35rem; }
.hdr-d-camp-pill[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; background: linear-gradient(135deg, #FEE2E2, #FEF3C7); border: 1px solid #FCA5A5; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #B91C1C; width: fit-content; }
.hdr-d-camp-pill[b-2uhbl8ws8t]  .rzi { font-size: 13px; }
.hdr-d-camp-detail[b-2uhbl8ws8t] { font-size: 0.72rem; color: #64748B; }

/* Stat pills */
.hdr-d-pills[b-2uhbl8ws8t] { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hdr-d-pill[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; background: #F1F5F9; border-radius: 999px; border: 1px solid #E0E6EB; }
.hdr-d-pill[b-2uhbl8ws8t]  .rzi { font-size: 15px; color: #64748B; }
.hdr-d-pill .val[b-2uhbl8ws8t] { font-size: 0.78rem; font-weight: 700; color: #1E293B; }
.hdr-d-pill.xp[b-2uhbl8ws8t]  .rzi { color: #F59E0B; }
.hdr-d-pill.xp[b-2uhbl8ws8t] { background: #FFFBEB; border-color: #FDE68A; }
.hdr-d-pill.fire[b-2uhbl8ws8t]  .rzi { color: #F97316; }
.hdr-d-pill.fire[b-2uhbl8ws8t] { background: #FFF7ED; border-color: #FED7AA; }
.hdr-d-pill.camp[b-2uhbl8ws8t]  .rzi { color: #EF4444; }
.hdr-d-pill.camp[b-2uhbl8ws8t] { background: #FEF2F2; border-color: #FECACA; }

/* Actions */
.hdr-d-actions[b-2uhbl8ws8t] { display: flex; gap: 0.5rem; }
.hdr-d-btn[b-2uhbl8ws8t] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.65rem 0.5rem; border-radius: 10px; border: 1px solid #E0E6EB; background: white; color: #1E293B; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.15s ease; }
.hdr-d-btn:hover[b-2uhbl8ws8t] { background: #F1F5F9; border-color: #CBD5E1; }
.hdr-d-btn.primary[b-2uhbl8ws8t] { background: #1a202c; color: white; border-color: #1a202c; }
.hdr-d-btn.primary:hover[b-2uhbl8ws8t] { background: #32677E; }
.hdr-d-btn[b-2uhbl8ws8t]  .rzi { font-size: 16px; }


/* ?? RESPONSIVE ?? */
@media (max-width: 640px) {
    .hdr-b-top[b-2uhbl8ws8t] { flex-direction: column; align-items: stretch; }
    .hdr-b-right[b-2uhbl8ws8t] { display: flex; justify-content: center; }
    .hdr-b-gauge[b-2uhbl8ws8t] { margin: 0 auto; }

    .hdr-c-banner[b-2uhbl8ws8t] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .hdr-c-stats[b-2uhbl8ws8t] { grid-template-columns: repeat(2, 1fr); }

    .hdr-d-top[b-2uhbl8ws8t] { flex-direction: column; align-items: center; text-align: center; }
    .hdr-d-readiness-row[b-2uhbl8ws8t] { justify-content: center; }
    .hdr-d-pills[b-2uhbl8ws8t] { justify-content: center; }
    .hdr-d-actions[b-2uhbl8ws8t] { flex-direction: column; }

    .hdr-b-actions[b-2uhbl8ws8t] { flex-direction: column; }
    .hdr-a-actions[b-2uhbl8ws8t] { flex-direction: column; }
}

@media (min-width: 641px) {
    .hdr-a-actions[b-2uhbl8ws8t] { flex-direction: row; }
    .hdr-a-btn[b-2uhbl8ws8t] { flex: 1; }
}

/* ?? SUB CONTROLS ?? */
.lab-sub-controls[b-2uhbl8ws8t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ?? COACH BADGE COLOR ?? */
.design-badge.coach[b-2uhbl8ws8t] {
    background: linear-gradient(135deg, #32677E, #1E4A5A);
}


/* ????????????????????????????????????????????
   COACH E � Current (Baseline)
   ???????????????????????????????????????????? */

.ch-e[b-2uhbl8ws8t] {
    background: linear-gradient(135deg, #32677E 0%, #1E4A5A 100%);
    border-radius: 20px;
    padding: 1.25rem;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
}

.ch-e-identity[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.875rem; }
.ch-e-avatar[b-2uhbl8ws8t] { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #70AFFB, #32677E); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.3); }
.ch-e-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.ch-e-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.3rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-e-role[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.ch-e-role[b-2uhbl8ws8t]  .rzi { font-size: 14px; }
.ch-e-fighter-badge[b-2uhbl8ws8t] { display: flex; flex-direction: column; align-items: center; padding: 0.45rem 0.85rem; background: rgba(255,255,255,0.15); border-radius: 12px; }
.ch-e-fighter-badge .count[b-2uhbl8ws8t] { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.ch-e-fighter-badge .lbl[b-2uhbl8ws8t] { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }

/* Attention */
.ch-e-attention[b-2uhbl8ws8t] { background: rgba(239,68,68,0.18); border: 1px solid rgba(239,68,68,0.35); border-radius: 14px; padding: 0.85rem; }
.ch-e-attention-hdr[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 0.85rem; font-weight: 600; }
.ch-e-attention-icon[b-2uhbl8ws8t] { width: 24px; height: 24px; background: #EF4444; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.ch-e-attention-icon[b-2uhbl8ws8t]  .rzi { font-size: 14px; }
.ch-e-attention-count[b-2uhbl8ws8t] { margin-left: auto; background: rgba(255,255,255,0.2); padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.ch-e-attention-list[b-2uhbl8ws8t] { display: flex; flex-direction: column; gap: 0.4rem; }
.ch-e-attention-item[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem; background: rgba(255,255,255,0.06); border-radius: 8px; }
.ch-e-attention-item .name[b-2uhbl8ws8t] { font-size: 0.85rem; font-weight: 600; display: block; }
.ch-e-attention-item .reason[b-2uhbl8ws8t] { font-size: 0.72rem; color: rgba(255,255,255,0.6); display: block; }
.ch-e-attention-item .indicator[b-2uhbl8ws8t] { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ch-e-attention-item .indicator[b-2uhbl8ws8t]  .rzi { font-size: 16px; }
.ch-e-attention-item .indicator.missed[b-2uhbl8ws8t] { background: rgba(239,68,68,0.3); color: #FCA5A5; }
.ch-e-attention-item .indicator.inactive[b-2uhbl8ws8t] { background: rgba(251,191,36,0.25); color: #FDE68A; }
.ch-e-attention-item .indicator.weight[b-2uhbl8ws8t] { background: rgba(251,146,60,0.25); color: #FED7AA; }

.ch-e-allgood[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem; background: rgba(74,222,128,0.12); border-radius: 12px; border: 1px solid rgba(74,222,128,0.25); font-size: 0.85rem; font-weight: 600; color: #4ADE80; }
.ch-e-allgood[b-2uhbl8ws8t]  .rzi { font-size: 18px; }

/* Today */
.ch-e-today[b-2uhbl8ws8t] { padding: 0.7rem 0.85rem; background: rgba(255,255,255,0.06); border-radius: 12px; }
.ch-e-today-hdr[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; font-size: 0.82rem; font-weight: 600; }
.ch-e-today-icon[b-2uhbl8ws8t] { width: 22px; height: 22px; background: rgba(112,175,251,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.ch-e-today-icon[b-2uhbl8ws8t]  .rzi { font-size: 13px; color: #70AFFB; }
.ch-e-today-count[b-2uhbl8ws8t] { margin-left: auto; font-weight: 700; font-size: 0.85rem; }
.ch-e-today-bar[b-2uhbl8ws8t] { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.ch-e-today-fill[b-2uhbl8ws8t] { height: 100%; background: linear-gradient(90deg, #70AFFB, #4ADE80); border-radius: 3px; }

/* Status grid */
.ch-e-grid[b-2uhbl8ws8t] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ch-e-box[b-2uhbl8ws8t] { padding: 0.75rem; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); }
.ch-e-box-hdr[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); margin-bottom: 0.4rem; }
.ch-e-box-hdr[b-2uhbl8ws8t]  .rzi { font-size: 14px; }
.ch-e-box.fight[b-2uhbl8ws8t] { border-color: rgba(251,146,60,0.3); }
.ch-e-countdown[b-2uhbl8ws8t] { display: flex; align-items: baseline; gap: 0.2rem; }
.ch-e-countdown .days[b-2uhbl8ws8t] { font-size: 1.5rem; font-weight: 800; color: #FB923C; line-height: 1; }
.ch-e-countdown .unit[b-2uhbl8ws8t] { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.5); }
.ch-e-fight-detail .fighter[b-2uhbl8ws8t] { font-size: 0.78rem; font-weight: 600; display: block; }
.ch-e-fight-detail .vs[b-2uhbl8ws8t] { font-size: 0.7rem; color: rgba(255,255,255,0.5); display: block; }
.ch-e-camp-count[b-2uhbl8ws8t] { font-size: 1.5rem; font-weight: 800; display: block; line-height: 1; }
.ch-e-camp-label[b-2uhbl8ws8t] { font-size: 0.72rem; color: rgba(255,255,255,0.5); }

/* Actions */
.ch-e-actions[b-2uhbl8ws8t] { display: flex; flex-direction: column; gap: 0.35rem; }
.ch-e-btn[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.82rem; transition: all 0.15s ease; }
.ch-e-btn.primary[b-2uhbl8ws8t] { background: rgba(255,255,255,0.15); color: white; padding: 0.65rem; border: 1px solid rgba(255,255,255,0.2); }
.ch-e-btn.primary:hover[b-2uhbl8ws8t] { background: rgba(255,255,255,0.25); }
.ch-e-btn:not(.primary)[b-2uhbl8ws8t] { background: transparent; color: rgba(255,255,255,0.7); padding: 0.55rem; border: 1px solid rgba(255,255,255,0.1); }
.ch-e-btn:not(.primary):hover[b-2uhbl8ws8t] { background: rgba(255,255,255,0.08); color: white; }
.ch-e-btn[b-2uhbl8ws8t]  .rzi { font-size: 18px; }


/* ????????????????????????????????????????????
   COACH F � Fighter-Style Unified Dark
   ???????????????????????????????????????????? */

.ch-f[b-2uhbl8ws8t] {
    background: linear-gradient(135deg, #191A2F 0%, #193153 50%, #10335E 100%);
    border-radius: 20px;
    padding: 1.25rem;
    color: white;
    border: 1px solid rgba(112,175,251,0.15);
}

.ch-f-identity[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.ch-f-avatar[b-2uhbl8ws8t] { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #32677E, #1E4A5A); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.3); }
.ch-f-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.ch-f-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.35rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-f-sub1[b-2uhbl8ws8t] { font-size: 0.88rem; color: rgba(255,255,255,0.7); display: block; }
.ch-f-sub2[b-2uhbl8ws8t] { font-size: 0.78rem; color: gold; display: block; }

/* Roster status (replaces readiness) */
.ch-f-roster[b-2uhbl8ws8t] { text-align: center; margin-bottom: 1rem; padding: 0.875rem 1rem; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); }
.ch-f-roster-display[b-2uhbl8ws8t] { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.ch-f-roster-val[b-2uhbl8ws8t] { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.ch-f-pct[b-2uhbl8ws8t] { font-size: 1.1rem; font-weight: 600; opacity: 0.85; }
.ch-f-roster-label[b-2uhbl8ws8t] { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); }
.ch-f-bar[b-2uhbl8ws8t] { height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.ch-f-bar-fill[b-2uhbl8ws8t] { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.ch-f-bar-fill.color-success[b-2uhbl8ws8t] { background: linear-gradient(90deg, #22C55E, #4ADE80); }
.ch-f-bar-fill.color-warning[b-2uhbl8ws8t] { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.ch-f-hint[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 500; opacity: 0.85; }
.ch-f-hint[b-2uhbl8ws8t]  .rzi { font-size: 14px; }

/* Metrics (matches fighter) */
.ch-f-metrics[b-2uhbl8ws8t] { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; margin-bottom: 1rem; }
.ch-f-metric[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 0.4rem; background: rgba(255,255,255,0.05); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.ch-f-metric .val[b-2uhbl8ws8t] { font-size: 1.1rem; font-weight: 700; color: white; line-height: 1; display: block; }
.ch-f-metric .lbl[b-2uhbl8ws8t] { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: rgba(255,255,255,0.5); display: block; margin-top: 0.05rem; }
.ch-f-metric-icon[b-2uhbl8ws8t] { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ch-f-metric-icon[b-2uhbl8ws8t]  .rzi { font-size: 14px; color: rgba(255,255,255,0.7); }
.ch-f-metric-icon.camp[b-2uhbl8ws8t] { background: rgba(251,146,60,0.15); }
.ch-f-metric-icon.camp[b-2uhbl8ws8t]  .rzi { color: #FB923C; }
.ch-f-metric-icon.team[b-2uhbl8ws8t] { background: rgba(112,175,251,0.15); }
.ch-f-metric-icon.team[b-2uhbl8ws8t]  .rzi { color: #70AFFB; }

/* Today sessions */
.ch-f-today[b-2uhbl8ws8t] { padding: 0.6rem 0.85rem; background: rgba(255,255,255,0.05); border-radius: 10px; margin-bottom: 0.75rem; }
.ch-f-today-row[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.ch-f-today-row[b-2uhbl8ws8t]  .rzi { font-size: 16px; color: #70AFFB; }
.ch-f-today-label[b-2uhbl8ws8t] { font-size: 0.78rem; font-weight: 600; flex: 1; }
.ch-f-today-count[b-2uhbl8ws8t] { font-size: 0.85rem; font-weight: 700; }
.ch-f-today-fill[b-2uhbl8ws8t] { height: 100%; background: linear-gradient(90deg, #70AFFB, #4ADE80); border-radius: 3px; }

/* Next fight */
.ch-f-fight[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; background: rgba(251,146,60,0.1); border: 1px solid rgba(251,146,60,0.2); border-radius: 10px; margin-bottom: 0.75rem; }
.ch-f-fight[b-2uhbl8ws8t]  .rzi { font-size: 20px; color: #FB923C; }
.ch-f-fight-info[b-2uhbl8ws8t] { flex: 1; }
.ch-f-fight-label[b-2uhbl8ws8t] { font-size: 0.8rem; font-weight: 600; display: block; }
.ch-f-fight-detail[b-2uhbl8ws8t] { font-size: 0.72rem; color: rgba(255,255,255,0.5); display: block; }

/* Actions (same as fighter) */
.ch-f-actions[b-2uhbl8ws8t] { display: flex; flex-direction: column; gap: 0.4rem; }
.ch-f-btn[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.15s ease; }
.ch-f-btn.primary[b-2uhbl8ws8t] { background: #32677E; color: white; padding: 0.7rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.ch-f-btn.primary:hover[b-2uhbl8ws8t] { filter: brightness(1.15); }
.ch-f-btn.secondary[b-2uhbl8ws8t] { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); padding: 0.6rem; border: 2px solid rgba(255,255,255,0.5); }
.ch-f-btn.secondary:hover[b-2uhbl8ws8t] { background: rgba(255,255,255,0.1); }
.ch-f-btn[b-2uhbl8ws8t]  .rzi { font-size: 18px; }


/* ????????????????????????????????????????????
   COACH G � Split Command
   ???????????????????????????????????????????? */

.ch-g[b-2uhbl8ws8t] {
    background: linear-gradient(145deg, #0F172A 0%, #1a202c 40%, #1E3A5F 100%);
    border-radius: 20px;
    padding: 1.25rem;
    color: white;
    border: 1px solid rgba(112,175,251,0.12);
}

.ch-g-top[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ch-g-left[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.ch-g-avatar[b-2uhbl8ws8t] { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #32677E, #1E4A5A); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.ch-g-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.ch-g-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-g-sub[b-2uhbl8ws8t] { font-size: 0.78rem; color: rgba(255,255,255,0.6); display: block; margin-top: 0.1rem; }
.ch-g-tags[b-2uhbl8ws8t] { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.ch-g-tag[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; background: rgba(255,255,255,0.08); border-radius: 999px; font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.ch-g-tag[b-2uhbl8ws8t]  .rzi { font-size: 12px; color: #70AFFB; }
.ch-g-tag.camp[b-2uhbl8ws8t]  .rzi { color: #FB923C; }

.ch-g-right[b-2uhbl8ws8t] { flex-shrink: 0; }
.ch-g-countdown[b-2uhbl8ws8t] { position: relative; width: 88px; height: 88px; }
.ch-g-ring[b-2uhbl8ws8t] { width: 88px; height: 88px; transform: rotate(-90deg); }
.ch-g-countdown-text[b-2uhbl8ws8t] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ch-g-countdown-val[b-2uhbl8ws8t] { font-size: 1.5rem; font-weight: 800; color: #FB923C; line-height: 1; }
.ch-g-countdown-label[b-2uhbl8ws8t] { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); margin-top: 0.15rem; }

/* Stat strip */
.ch-g-strip[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: space-around; padding: 0.6rem 0; margin-bottom: 0.85rem; background: rgba(255,255,255,0.04); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.ch-g-stat[b-2uhbl8ws8t] { text-align: center; }
.ch-g-stat .val[b-2uhbl8ws8t] { font-size: 1.05rem; font-weight: 700; display: block; line-height: 1; }
.ch-g-stat .lbl[b-2uhbl8ws8t] { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: rgba(255,255,255,0.45); display: block; margin-top: 0.1rem; }
.ch-g-divider[b-2uhbl8ws8t] { width: 1px; height: 28px; background: rgba(255,255,255,0.1); }

/* Attention */
.ch-g-attention[b-2uhbl8ws8t] { padding: 0.75rem; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); border-radius: 12px; margin-bottom: 0.85rem; }
.ch-g-attention-hdr[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #FCA5A5; margin-bottom: 0.5rem; }
.ch-g-attention-hdr[b-2uhbl8ws8t]  .rzi { font-size: 16px; color: #EF4444; }
.ch-g-attention-list[b-2uhbl8ws8t] { display: flex; flex-direction: column; gap: 0.3rem; }
.ch-g-attn-row[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; background: rgba(255,255,255,0.05); border-radius: 8px; }
.ch-g-attn-row .name[b-2uhbl8ws8t] { font-size: 0.82rem; font-weight: 600; }
.ch-g-attn-row .pill[b-2uhbl8ws8t] { font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; }
.ch-g-attn-row .pill.missed[b-2uhbl8ws8t] { background: rgba(239,68,68,0.25); color: #FCA5A5; }
.ch-g-attn-row .pill.inactive[b-2uhbl8ws8t] { background: rgba(251,191,36,0.2); color: #FDE68A; }
.ch-g-attn-row .pill.weight[b-2uhbl8ws8t] { background: rgba(251,146,60,0.2); color: #FED7AA; }

/* Actions */
.ch-g-actions[b-2uhbl8ws8t] { display: flex; gap: 0.5rem; }
.ch-g-btn[b-2uhbl8ws8t] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem 0.4rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.78rem; cursor: pointer; transition: all 0.15s ease; }
.ch-g-btn:hover[b-2uhbl8ws8t] { background: rgba(255,255,255,0.1); }
.ch-g-btn.primary[b-2uhbl8ws8t] { background: #32677E; color: white; border-color: #32677E; }
.ch-g-btn.primary:hover[b-2uhbl8ws8t] { filter: brightness(1.15); }
.ch-g-btn[b-2uhbl8ws8t]  .rzi { font-size: 16px; }


/* ????????????????????????????????????????????
   COACH H � Athletic Card (Light)
   ???????????????????????????????????????????? */

.ch-h[b-2uhbl8ws8t] {
    background: white;
    border-radius: 18px;
    padding: 1.25rem;
    border: 1px solid #E0E6EB;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.ch-h-top[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ch-h-avatar-ring[b-2uhbl8ws8t] { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.ch-h-ring-svg[b-2uhbl8ws8t] { width: 72px; height: 72px; transform: rotate(-90deg); }
.ch-h-avatar-inner[b-2uhbl8ws8t] { position: absolute; inset: 8px; border-radius: 50%; background: linear-gradient(135deg, #32677E, #1E4A5A); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: white; }

.ch-h-info[b-2uhbl8ws8t] { flex: 1; min-width: 0; }
.ch-h-info h2[b-2uhbl8ws8t] { margin: 0; font-size: 1.15rem; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-h-sub[b-2uhbl8ws8t] { font-size: 0.78rem; color: #64748B; display: block; margin-top: 0.1rem; }

.ch-h-status-row[b-2uhbl8ws8t] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.ch-h-status-pill[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; }
.ch-h-status-pill[b-2uhbl8ws8t]  .rzi { font-size: 13px; }
.ch-h-status-pill.good[b-2uhbl8ws8t] { background: #F0FDF4; border: 1px solid #BBF7D0; color: #16A34A; }
.ch-h-status-pill.attention[b-2uhbl8ws8t] { background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626; }
.ch-h-fight-pill[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: #FFF7ED; border: 1px solid #FED7AA; color: #C2410C; }
.ch-h-fight-pill[b-2uhbl8ws8t]  .rzi { font-size: 13px; }

/* Stat pills */
.ch-h-pills[b-2uhbl8ws8t] { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ch-h-pill[b-2uhbl8ws8t] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; background: #F1F5F9; border-radius: 999px; border: 1px solid #E0E6EB; }
.ch-h-pill[b-2uhbl8ws8t]  .rzi { font-size: 15px; color: #64748B; }
.ch-h-pill .val[b-2uhbl8ws8t] { font-size: 0.78rem; font-weight: 700; color: #1E293B; }
.ch-h-pill.fighters[b-2uhbl8ws8t]  .rzi { color: #32677E; }
.ch-h-pill.fighters[b-2uhbl8ws8t] { background: #F0FDFA; border-color: #99F6E4; }
.ch-h-pill.camps[b-2uhbl8ws8t]  .rzi { color: #F97316; }
.ch-h-pill.camps[b-2uhbl8ws8t] { background: #FFF7ED; border-color: #FED7AA; }
.ch-h-pill.teams[b-2uhbl8ws8t]  .rzi { color: #6366F1; }
.ch-h-pill.teams[b-2uhbl8ws8t] { background: #EEF2FF; border-color: #C7D2FE; }
.ch-h-pill.sessions[b-2uhbl8ws8t]  .rzi { color: #0EA5E9; }
.ch-h-pill.sessions[b-2uhbl8ws8t] { background: #F0F9FF; border-color: #BAE6FD; }

/* Attention list */
.ch-h-attention[b-2uhbl8ws8t] { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ch-h-attn-row[b-2uhbl8ws8t] { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; }
.ch-h-attn-row .name[b-2uhbl8ws8t] { font-size: 0.85rem; font-weight: 700; color: #1E293B; }
.ch-h-attn-row .tag[b-2uhbl8ws8t] { font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; }
.ch-h-attn-row .tag.missed[b-2uhbl8ws8t] { background: #FEE2E2; color: #DC2626; }
.ch-h-attn-row .tag.inactive[b-2uhbl8ws8t] { background: #FEF3C7; color: #D97706; }
.ch-h-attn-row .tag.weight[b-2uhbl8ws8t] { background: #FFEDD5; color: #EA580C; }

/* Actions */
.ch-h-actions[b-2uhbl8ws8t] { display: flex; gap: 0.5rem; }
.ch-h-btn[b-2uhbl8ws8t] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.65rem 0.5rem; border-radius: 10px; border: 1px solid #E0E6EB; background: white; color: #1E293B; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.15s ease; }
.ch-h-btn:hover[b-2uhbl8ws8t] { background: #F1F5F9; border-color: #CBD5E1; }
.ch-h-btn.primary[b-2uhbl8ws8t] { background: #32677E; color: white; border-color: #32677E; }
.ch-h-btn.primary:hover[b-2uhbl8ws8t] { background: #1E4A5A; }
.ch-h-btn[b-2uhbl8ws8t]  .rzi { font-size: 16px; }


/* ?? COACH RESPONSIVE ?? */
@media (max-width: 640px) {
    .ch-g-top[b-2uhbl8ws8t] { flex-direction: column; align-items: stretch; }
    .ch-g-right[b-2uhbl8ws8t] { display: flex; justify-content: center; }
    .ch-g-countdown[b-2uhbl8ws8t] { margin: 0 auto; }
    .ch-g-actions[b-2uhbl8ws8t] { flex-direction: column; }

    .ch-h-top[b-2uhbl8ws8t] { flex-direction: column; align-items: center; text-align: center; }
    .ch-h-status-row[b-2uhbl8ws8t] { justify-content: center; }
    .ch-h-pills[b-2uhbl8ws8t] { justify-content: center; }
    .ch-h-actions[b-2uhbl8ws8t] { flex-direction: column; }

    .ch-e-actions[b-2uhbl8ws8t] { flex-direction: column; }
    .ch-f-actions[b-2uhbl8ws8t] { flex-direction: column; }
}

@media (min-width: 641px) {
    .ch-e-actions[b-2uhbl8ws8t] { flex-direction: row; }
    .ch-e-btn[b-2uhbl8ws8t] { flex: 1; }
    .ch-f-actions[b-2uhbl8ws8t] { flex-direction: row; }
    .ch-f-btn[b-2uhbl8ws8t] { flex: 1; }
}
/* /Components/Pages/Administration/Pages/GamificationDevTools.razor.rz.scp.css */
/* ============================================
   GAMIFICATION DEVTOOLS - FIGHTER JOURNEY LAYOUT
   Follows the logical flow of a fighter through a season
   ============================================ */

.devtools-page[b-wd8y95cqlu] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* ===== HEADER ===== */
.page-header[b-wd8y95cqlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.header-content h1[b-wd8y95cqlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.5rem;
    color: #1e293b;
}

.header-content p[b-wd8y95cqlu] {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.header-actions[b-wd8y95cqlu] {
    display: flex;
    gap: 0.5rem;
}

/* ===== LOADING ===== */
.loading-overlay[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #64748b;
}

/* ===== JOURNEY STEPS ===== */
.journey-step[b-wd8y95cqlu] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
}

.step-number[b-wd8y95cqlu] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.step-content[b-wd8y95cqlu] {
    flex: 1;
}

.step-content h2[b-wd8y95cqlu] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #1e293b;
}

.step-desc[b-wd8y95cqlu] {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

/* ===== STEP 1: CONTEXT ===== */
.context-grid[b-wd8y95cqlu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.context-field label[b-wd8y95cqlu] {
    display: block;
    font-weight: 600;
    color: #475569;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.warning-msg[b-wd8y95cqlu] {
    padding: 0.75rem;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    color: #92400e;
    font-size: 0.85rem;
}

/* ===== STATS BAR ===== */
.stats-bar[b-wd8y95cqlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.stat[b-wd8y95cqlu] {
    text-align: center;
    min-width: 80px;
}

.stat-label[b-wd8y95cqlu] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.stat-value[b-wd8y95cqlu] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.stat-value.level[b-wd8y95cqlu] { color: #a78bfa; }
.stat-value.xp[b-wd8y95cqlu] { color: #fbbf24; }
.stat-value.badges[b-wd8y95cqlu] { color: #34d399; }

.stat.notifications[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat.notifications.has-pending .stat-value[b-wd8y95cqlu] {
    color: #f87171;
    animation: pulse-b-wd8y95cqlu 1.5s ease-in-out infinite;
}

@keyframes pulse-b-wd8y95cqlu {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===== STEP 2: ACTIONS ===== */
.actions-grid[b-wd8y95cqlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.action-card[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-card:hover[b-wd8y95cqlu] {
    border-color: #6366f1;
    background: #f5f3ff;
    transform: translateY(-2px);
}

.action-card[b-wd8y95cqlu]  .rzi {
    font-size: 1.75rem;
    color: #6366f1;
}

.action-title[b-wd8y95cqlu] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.action-xp[b-wd8y95cqlu] {
    font-size: 0.75rem;
    color: #64748b;
}

.action-card.manual[b-wd8y95cqlu] {
    border-color: #fbbf24;
}

.action-card.manual:hover[b-wd8y95cqlu] {
    background: #fffbeb;
    border-color: #f59e0b;
}

.action-card.manual[b-wd8y95cqlu]  .rzi {
    color: #f59e0b;
}

/* ===== STEP 3: SEASON PASS ===== */
.season-progress[b-wd8y95cqlu] {
    margin-bottom: 1rem;
}

.progress-bar[b-wd8y95cqlu] {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill[b-wd8y95cqlu] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-text[b-wd8y95cqlu] {
    font-size: 0.8rem;
    color: #64748b;
}

.milestones-track[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.milestone[b-wd8y95cqlu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.milestone.claimed[b-wd8y95cqlu] {
    background: #f0fdf4;
    border-color: #86efac;
}

.milestone.claimable[b-wd8y95cqlu] {
    background: #fffbeb;
    border-color: #fbbf24;
}

.milestone.locked[b-wd8y95cqlu] {
    opacity: 0.6;
}

.milestone-marker[b-wd8y95cqlu] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2e8f0;
}

.milestone.claimed .milestone-marker[b-wd8y95cqlu] {
    background: #22c55e;
    color: white;
}

.milestone.claimable .milestone-marker[b-wd8y95cqlu] {
    background: #f59e0b;
    color: white;
}

.milestone-info[b-wd8y95cqlu] {
    flex: 1;
}

.milestone-name[b-wd8y95cqlu] {
    display: block;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.milestone-xp[b-wd8y95cqlu] {
    font-size: 0.75rem;
    color: #64748b;
}

/* ===== STEP 4: BADGES ===== */
.badges-layout[b-wd8y95cqlu] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.earned-badges h3[b-wd8y95cqlu],
.award-badge h3[b-wd8y95cqlu] {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badges-grid[b-wd8y95cqlu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge-chip[b-wd8y95cqlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.badge-chip.tier-epic[b-wd8y95cqlu] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #c4b5fd;
}

.badge-chip.tier-legendary[b-wd8y95cqlu] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-color: #fde047;
}

.badge-chip.tier-rare[b-wd8y95cqlu] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.badge-icon[b-wd8y95cqlu] {
    font-size: 1.25rem;
}

.badge-name[b-wd8y95cqlu] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1e293b;
}

.award-form[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.role-select[b-wd8y95cqlu] {
    display: flex;
    gap: 1rem;
}

/* ===== ACTIVITY LOG ===== */
.step-log .step-number[b-wd8y95cqlu] {
    background: #475569;
}

.log-columns[b-wd8y95cqlu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.log-section h4[b-wd8y95cqlu] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.transaction-list[b-wd8y95cqlu],
.notification-list[b-wd8y95cqlu],
.action-log[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.tx-row[b-wd8y95cqlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.tx-amount[b-wd8y95cqlu] {
    font-weight: 700;
    min-width: 50px;
}

.tx-amount.positive[b-wd8y95cqlu] { color: #22c55e; }
.tx-amount.negative[b-wd8y95cqlu] { color: #ef4444; }

.tx-desc[b-wd8y95cqlu] {
    flex: 1;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-time[b-wd8y95cqlu] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.notif-row[b-wd8y95cqlu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.notif-type[b-wd8y95cqlu] {
    font-weight: 500;
    color: #6366f1;
}

.notif-time[b-wd8y95cqlu] {
    color: #94a3b8;
}

.log-row[b-wd8y95cqlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.25rem 0;
}

.log-row.success .log-icon[b-wd8y95cqlu] { color: #22c55e; }
.log-row.error .log-icon[b-wd8y95cqlu] { color: #ef4444; }

.log-text[b-wd8y95cqlu] {
    color: #475569;
}

/* ===== EMPTY STATES ===== */
.empty-state[b-wd8y95cqlu],
.empty-text[b-wd8y95cqlu] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.start-prompt[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #94a3b8;
}

/* ===== RECONCILIATION ===== */
.recon-stat[b-wd8y95cqlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.recon-stat-value[b-wd8y95cqlu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.recon-stat-label[b-wd8y95cqlu] {
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
}

.recon-table[b-wd8y95cqlu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.recon-table th[b-wd8y95cqlu] {
    background: #f1f5f9;
    color: #475569;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
}

.recon-table td[b-wd8y95cqlu] {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
}

.recon-table tr:hover td[b-wd8y95cqlu] {
    background: #f8fafc;
}



.start-prompt[b-wd8y95cqlu]  .rzi {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce-b-wd8y95cqlu 1s infinite;
}

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

/* ===== CELEBRATION PREVIEW ===== */
.step-celebrations[b-wd8y95cqlu] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #c4b5fd;
}

.step-celebrations .step-number[b-wd8y95cqlu] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.celebration-grid[b-wd8y95cqlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.celebration-group[b-wd8y95cqlu] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e9d5ff;
}

.celebration-group h4[b-wd8y95cqlu] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.celebration-buttons[b-wd8y95cqlu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .context-grid[b-wd8y95cqlu] {
        grid-template-columns: 1fr;
    }
    
    .badges-layout[b-wd8y95cqlu] {
        grid-template-columns: 1fr;
    }
    
    .log-columns[b-wd8y95cqlu] {
        grid-template-columns: 1fr;
    }
    
    .stats-bar[b-wd8y95cqlu] {
        justify-content: center;
    }
    
    .celebration-grid[b-wd8y95cqlu] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .page-header[b-wd8y95cqlu] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .actions-grid[b-wd8y95cqlu] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .celebration-grid[b-wd8y95cqlu] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Administration/Pages/SeasonManager.razor.rz.scp.css */
.season-manager-page[b-f5zbp9s11e] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== HEADER ===== */
.page-header[b-f5zbp9s11e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h1[b-f5zbp9s11e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--rz-text-color);
}

.header-content p[b-f5zbp9s11e] {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.header-actions[b-f5zbp9s11e] {
    display: flex;
    gap: 0.5rem;
}

/* ===== LOADING STATE ===== */
.loading-state[b-f5zbp9s11e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--rz-text-secondary-color);
}

.loading-state p[b-f5zbp9s11e] {
    margin-top: 1rem;
}

/* ===== SEASONS GRID ===== */
.seasons-grid[b-f5zbp9s11e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

/* ===== SEASON CARD ===== */
.season-card[b-f5zbp9s11e] {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

.season-card:hover[b-f5zbp9s11e] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.season-card.current[b-f5zbp9s11e] {
    border-color: var(--rz-success);
    box-shadow: 0 0 0 1px var(--rz-success);
}

.season-card.upcoming[b-f5zbp9s11e] {
    border-color: var(--rz-info);
}

.season-card.ended[b-f5zbp9s11e] {
    opacity: 0.7;
}

/* Season Header */
.season-header[b-f5zbp9s11e] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.season-icon[b-f5zbp9s11e] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rz-primary-light) 0%, var(--rz-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.season-title[b-f5zbp9s11e] {
    flex: 1;
    min-width: 0;
}

.season-title h3[b-f5zbp9s11e] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.season-key[b-f5zbp9s11e] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    font-family: monospace;
}

.season-status[b-f5zbp9s11e] {
    flex-shrink: 0;
}

.status-badge[b-f5zbp9s11e] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.current[b-f5zbp9s11e] {
    background: var(--rz-success);
    color: white;
}

.status-badge.upcoming[b-f5zbp9s11e] {
    background: var(--rz-info);
    color: white;
}

.status-badge.ended[b-f5zbp9s11e] {
    background: var(--rz-base-600);
    color: var(--rz-text-secondary-color);
}

/* Season Dates */
.season-dates[b-f5zbp9s11e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--rz-base-200);
    border-radius: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.date-item[b-f5zbp9s11e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--rz-text-color);
}

.date-item .rzi[b-f5zbp9s11e] {
    font-size: 1rem;
    color: var(--rz-text-secondary-color);
}

.date-separator[b-f5zbp9s11e] {
    color: var(--rz-text-tertiary-color);
}

.duration[b-f5zbp9s11e] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    margin-left: auto;
}

/* Season Description */
.season-description[b-f5zbp9s11e] {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* ===== MILESTONES ===== */
.season-milestones[b-f5zbp9s11e] {
    margin-bottom: 1rem;
}

.milestones-header[b-f5zbp9s11e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.milestones-header h4[b-f5zbp9s11e] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.milestones-list[b-f5zbp9s11e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.milestone-item[b-f5zbp9s11e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-100);
    border-radius: 6px;
    border-left: 3px solid var(--rz-base-400);
}

.milestone-item.rarity-common[b-f5zbp9s11e] {
    border-left-color: #9e9e9e;
}

.milestone-item.rarity-uncommon[b-f5zbp9s11e] {
    border-left-color: #4caf50;
}

.milestone-item.rarity-rare[b-f5zbp9s11e] {
    border-left-color: #2196f3;
}

.milestone-item.rarity-epic[b-f5zbp9s11e] {
    border-left-color: #9c27b0;
}

.milestone-item.rarity-legendary[b-f5zbp9s11e] {
    border-left-color: #ff9800;
}

.milestone-xp[b-f5zbp9s11e] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rz-primary);
    min-width: 70px;
}

.milestone-info[b-f5zbp9s11e] {
    flex: 1;
    min-width: 0;
}

.milestone-name[b-f5zbp9s11e] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

.milestone-reward[b-f5zbp9s11e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
}

.milestone-reward .rzi[b-f5zbp9s11e] {
    font-size: 0.85rem;
}

.milestone-actions[b-f5zbp9s11e] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.milestone-item:hover .milestone-actions[b-f5zbp9s11e] {
    opacity: 1;
}

.empty-milestones[b-f5zbp9s11e] {
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
    font-style: italic;
    padding: 0.5rem;
}

/* Season Actions */
.season-actions[b-f5zbp9s11e] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rz-border-color);
}

/* ===== EMPTY STATE ===== */
.empty-state[b-f5zbp9s11e] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--rz-panel-background-color);
    border: 2px dashed var(--rz-border-color);
    border-radius: 12px;
}

.empty-state .rzi[b-f5zbp9s11e] {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 1rem;
}

.empty-state h3[b-f5zbp9s11e] {
    margin: 0 0 0.5rem 0;
    color: var(--rz-text-color);
}

.empty-state p[b-f5zbp9s11e] {
    margin: 0 0 1.5rem 0;
    color: var(--rz-text-secondary-color);
}

/* ===== TIPS SECTION ===== */
.tips-section[b-f5zbp9s11e] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--rz-base-200);
    border-radius: 12px;
}

.tips-section h3[b-f5zbp9s11e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--rz-text-color);
}

.tips-section h3 .rzi[b-f5zbp9s11e] {
    color: var(--rz-warning);
}

.tips-grid[b-f5zbp9s11e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.tip[b-f5zbp9s11e] {
    padding: 1rem;
    background: var(--rz-panel-background-color);
    border-radius: 8px;
}

.tip strong[b-f5zbp9s11e] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--rz-text-color);
    font-size: 0.9rem;
}

.tip p[b-f5zbp9s11e] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .season-manager-page[b-f5zbp9s11e] {
        padding: 1rem;
    }

    .page-header[b-f5zbp9s11e] {
        flex-direction: column;
    }

    .header-actions[b-f5zbp9s11e] {
        width: 100%;
    }

    .header-actions .rz-button[b-f5zbp9s11e] {
        flex: 1;
    }

    .seasons-grid[b-f5zbp9s11e] {
        grid-template-columns: 1fr;
    }

    .season-dates[b-f5zbp9s11e] {
        flex-direction: column;
        align-items: flex-start;
    }

    .date-separator[b-f5zbp9s11e] {
        display: none;
    }

    .duration[b-f5zbp9s11e] {
        margin-left: 0;
    }
}
/* /Components/Pages/Administration/Pages/StripeTest.razor.rz.scp.css */
/* Stripe Test Page */

.stripe-test-page[b-unhpl1vkhy] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-unhpl1vkhy] {
    margin-bottom: 2rem;
}

.page-header h1[b-unhpl1vkhy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-header h1 .rzi[b-unhpl1vkhy] {
    color: #635bff; /* Stripe purple */
}

.page-header .subtitle[b-unhpl1vkhy] {
    color: #64748b;
    margin: 0.5rem 0 0 0;
}

/* Test Sections */
.test-section[b-unhpl1vkhy] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.test-section h2[b-unhpl1vkhy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.test-section h2 .rzi[b-unhpl1vkhy] {
    color: #635bff;
    font-size: 1.25rem;
}

/* Configuration Grid */
.config-grid[b-unhpl1vkhy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .config-grid[b-unhpl1vkhy] {
        grid-template-columns: 1fr;
    }
}

.config-item[b-unhpl1vkhy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.config-item .rzi[b-unhpl1vkhy] {
    font-size: 1.5rem;
}

.config-item.configured .rzi[b-unhpl1vkhy] {
    color: #22c55e;
}

.config-item.missing .rzi[b-unhpl1vkhy] {
    color: #ef4444;
}

.config-item.test .rzi[b-unhpl1vkhy] {
    color: #8b5cf6;
}

.config-item.live .rzi[b-unhpl1vkhy] {
    color: #f59e0b;
}

.config-item strong[b-unhpl1vkhy] {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
}

.config-item span[b-unhpl1vkhy] {
    font-size: 0.875rem;
    color: #1e293b;
}

/* Test Forms */
.test-form[b-unhpl1vkhy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-unhpl1vkhy] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Result Box */
.result-box[b-unhpl1vkhy] {
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-box.success[b-unhpl1vkhy] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.result-box.success strong[b-unhpl1vkhy] {
    color: #166534;
}

.result-box.error[b-unhpl1vkhy] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.result-box.error strong[b-unhpl1vkhy] {
    color: #991b1b;
}

.result-box code[b-unhpl1vkhy] {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-family: monospace;
    word-break: break-all;
}

.result-box code.secret[b-unhpl1vkhy] {
    color: #64748b;
}

.portal-link[b-unhpl1vkhy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #635bff;
    font-weight: 600;
    text-decoration: none;
}

.portal-link:hover[b-unhpl1vkhy] {
    text-decoration: underline;
}

/* Endpoints List */
.endpoints-list[b-unhpl1vkhy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.endpoint[b-unhpl1vkhy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.endpoint .method[b-unhpl1vkhy] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.endpoint .method.get[b-unhpl1vkhy] {
    background: #dbeafe;
    color: #1d4ed8;
}

.endpoint .method.post[b-unhpl1vkhy] {
    background: #dcfce7;
    color: #166534;
}

.endpoint code[b-unhpl1vkhy] {
    font-family: monospace;
    font-size: 0.85rem;
    color: #1e293b;
}

.endpoint .desc[b-unhpl1vkhy] {
    margin-left: auto;
    font-size: 0.8rem;
    color: #64748b;
}

/* Instructions */
.test-section.instructions[b-unhpl1vkhy] {
    background: #fefce8;
    border-color: #fef08a;
}

.test-section.instructions h2 .rzi[b-unhpl1vkhy] {
    color: #f59e0b;
}

.test-section.instructions ol[b-unhpl1vkhy] {
    margin: 0;
    padding-left: 1.25rem;
}

.test-section.instructions li[b-unhpl1vkhy] {
    margin-bottom: 1rem;
}

.test-section.instructions li:last-child[b-unhpl1vkhy] {
    margin-bottom: 0;
}

.test-section.instructions strong[b-unhpl1vkhy] {
    color: #1e293b;
}

.test-section.instructions p[b-unhpl1vkhy] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: #64748b;
}

.test-section.instructions pre[b-unhpl1vkhy] {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 0.5rem 0 0;
}

.test-section.instructions pre code[b-unhpl1vkhy] {
    font-family: monospace;
    font-size: 0.8rem;
}

.test-section.instructions a[b-unhpl1vkhy] {
    color: #635bff;
}
/* /Components/Pages/Admin/GamificationTest.razor.rz.scp.css */
/* ============================================
   GAMIFICATION TEST PAGE - ADMIN STYLE
   Matches Administration.razor design system
   ============================================ */

.gam-test-page[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ===== HEADER ===== */
.gam-header[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.gam-header-icon[b-xzm0jr0lb6] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gam-header-icon[b-xzm0jr0lb6]  .rzi {
    font-size: 28px;
    color: white;
}

.gam-header-text h1[b-xzm0jr0lb6] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.gam-header-text p[b-xzm0jr0lb6] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #64748B;
}

/* ===== MODE TOGGLE ===== */
.mode-toggle-card[b-xzm0jr0lb6] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mode-toggle[b-xzm0jr0lb6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.mode-option[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 12px;
    background: #F8FAFC;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.mode-option:hover[b-xzm0jr0lb6] {
    background: #F1F5F9;
}

.mode-option.active[b-xzm0jr0lb6] {
    background: linear-gradient(135deg, rgba(112, 175, 251, 0.1), rgba(50, 103, 126, 0.1));
    border-color: #70AFFB;
}

.mode-option[b-xzm0jr0lb6]  .rzi {
    font-size: 24px;
    color: #64748B;
}

.mode-option.active[b-xzm0jr0lb6]  .rzi {
    color: #70AFFB;
}

.mode-option span[b-xzm0jr0lb6] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.9rem;
}


.mode-option small[b-xzm0jr0lb6] {
    font-size: 0.7rem;
    color: #94A3B8;
}

.live-warning[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    font-size: 0.75rem;
    color: #DC2626;
}

.live-warning[b-xzm0jr0lb6]  .rzi {
    font-size: 16px;
}

/* ===== CELEBRATION TOGGLE ===== */
.celebration-toggle[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(244, 114, 182, 0.1));
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 10px;
}

.celebration-toggle[b-xzm0jr0lb6]  .rz-switch {
    flex-shrink: 0;
}

.celebration-label[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #A78BFA;
}

.celebration-label[b-xzm0jr0lb6]  .rzi {
    font-size: 16px;
}

.celebration-toggle small[b-xzm0jr0lb6] {
    font-size: 0.7rem;
    color: #94A3B8;
    margin-left: auto;
}

/* ===== LOADING STATE ===== */
.loading-state[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: #64748B;
}

/* ===== SECTIONS ===== */
.gam-section[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.gam-section-title[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gam-section-title[b-xzm0jr0lb6]  .rzi {
    font-size: 18px;
    color: #94A3B8;
}

/* ===== CARDS ===== */
.gam-card[b-xzm0jr0lb6] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ===== FIGHTER STATS ===== */
.fighter-stats-row[b-xzm0jr0lb6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.mini-stat[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #F8FAFC;
    border-radius: 12px;
}

.mini-stat[b-xzm0jr0lb6]  .rzi {
    font-size: 20px;
    color: #70AFFB;
}

.mini-stat-data[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
}

.mini-val[b-xzm0jr0lb6] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}

.mini-lbl[b-xzm0jr0lb6] {
    font-size: 0.65rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ===== ACTION GRID ===== */
.action-grid[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-card[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.action-card:hover[b-xzm0jr0lb6] {
    border-color: #70AFFB;
    transform: translateX(4px);
}

.action-card-icon[b-xzm0jr0lb6] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-card-icon[b-xzm0jr0lb6]  .rzi {
    font-size: 22px;
    color: white;
}

.action-card-icon.xp[b-xzm0jr0lb6] { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.action-card-icon.level[b-xzm0jr0lb6] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.action-card-icon.streak[b-xzm0jr0lb6] { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.action-card-icon.badge[b-xzm0jr0lb6] { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.action-card-icon.avatar[b-xzm0jr0lb6] { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.action-card-content[b-xzm0jr0lb6] {
    flex: 1;
    min-width: 0;
}

.action-card-content h4[b-xzm0jr0lb6] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
}

.action-card-content p[b-xzm0jr0lb6] {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: #64748B;
}

.action-card-arrow[b-xzm0jr0lb6] {
    color: #CBD5E1;
    font-size: 20px;
    transition: transform 0.2s;
}

/* ===== EXPANDABLE ACTIONS ===== */
.action-expand[b-xzm0jr0lb6] {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 1rem;
    margin-top: -0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-row[b-xzm0jr0lb6] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.action-buttons[b-xzm0jr0lb6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-buttons[b-xzm0jr0lb6]  .rz-button {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

/* ===== CHIPS ===== */
.streak-chips[b-xzm0jr0lb6], .badge-chips[b-xzm0jr0lb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.streak-chip[b-xzm0jr0lb6] {
    padding: 0.25rem 0.625rem;
    background: #E2E8F0;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748B;
}

.streak-chip.done[b-xzm0jr0lb6] {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

.badge-chip[b-xzm0jr0lb6] {
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a1a1a;
}

.badge-chip.new[b-xzm0jr0lb6] {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

.badge-chip.more[b-xzm0jr0lb6] {
    background: #E2E8F0;
    color: #64748B;
}

/* ===== LOG ===== */
.log-header[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.log-card[b-xzm0jr0lb6] {
    background: white;
    border-radius: 16px;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-height: 300px;
    overflow-y: auto;
}

.log-row[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    font-size: 0.8rem;
    border-left: 3px solid #E2E8F0;
    margin-bottom: 0.375rem;
    background: #F8FAFC;
}

.log-row:last-child[b-xzm0jr0lb6] { margin-bottom: 0; }

.log-row.success[b-xzm0jr0lb6] { border-left-color: #22C55E; }
.log-row.error[b-xzm0jr0lb6] { border-left-color: #EF4444; background: rgba(239, 68, 68, 0.05); }
.log-row.warning[b-xzm0jr0lb6] { border-left-color: #F59E0B; }
.log-row.info[b-xzm0jr0lb6] { border-left-color: #3B82F6; }

.log-time[b-xzm0jr0lb6] {
    font-size: 0.7rem;
    color: #94A3B8;
    font-family: monospace;
    min-width: 55px;
}

.log-row[b-xzm0jr0lb6]  .rzi {
    font-size: 16px;
    color: #64748B;
}

.log-row.success[b-xzm0jr0lb6]  .rzi { color: #22C55E; }
.log-row.error[b-xzm0jr0lb6]  .rzi { color: #EF4444; }
.log-row.warning[b-xzm0jr0lb6]  .rzi { color: #F59E0B; }

.log-msg[b-xzm0jr0lb6] {
    flex: 1;
    color: #334155;
}

.sim-tag[b-xzm0jr0lb6] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    background: #E0E7FF;
    color: #4F46E5;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.log-empty[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 2rem;
    color: #94A3B8;
    font-size: 0.85rem;
}

.log-empty[b-xzm0jr0lb6]  .rzi {
    font-size: 24px;
    opacity: 0.5;
}

/* ===== SIMULATION INFO ===== */
.sim-info[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-size: 0.75rem;
    color: #2563EB;
}

.sim-info[b-xzm0jr0lb6]  .rzi {
    font-size: 16px;
}

/* ===== HELP BOX ===== */
.help-box[b-xzm0jr0lb6] {
    background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
    border: 1px solid #BAE6FD;
    border-radius: 10px;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
}

.help-title[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0369A1;
    margin-bottom: 0.375rem;
}

.help-title[b-xzm0jr0lb6]  .rzi {
    font-size: 14px;
}

.help-box p[b-xzm0jr0lb6] {
    margin: 0;
    font-size: 0.8rem;
    color: #334155;
    line-height: 1.5;
}

.example-box[b-xzm0jr0lb6] {
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #475569;
}

.example-box strong[b-xzm0jr0lb6] {
    color: #0369A1;
}

/* ===== BUTTON GROUPS ===== */
.button-group[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.button-label[b-xzm0jr0lb6] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ===== EARNED SECTION ===== */
.earned-section[b-xzm0jr0lb6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

/* ===== AVATAR BREAKDOWN ===== */
.avatar-breakdown[b-xzm0jr0lb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.625rem;
    background: #F8FAFC;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.avatar-stat[b-xzm0jr0lb6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #475569;
}

.avatar-stat[b-xzm0jr0lb6]  .rzi {
    font-size: 14px;
    color: #70AFFB;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .fighter-stats-row[b-xzm0jr0lb6] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mode-toggle[b-xzm0jr0lb6] {
        grid-template-columns: 1fr;
    }
    
    .action-buttons[b-xzm0jr0lb6] {
        width: 100%;
    }
    
    .action-buttons[b-xzm0jr0lb6]  .rz-button {
        flex: 1;
        justify-content: center;
    }
    
    .avatar-breakdown[b-xzm0jr0lb6] {
        flex-direction: column;
        gap: 0.375rem;
    }
}
/* /Components/Pages/Admin/PushNotificationTest.razor.rz.scp.css */
/* ============================================
   PUSH NOTIFICATION TEST PAGE STYLES
   ============================================ */

.push-test-page[b-xw6rntlyts] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-xw6rntlyts] {
    margin-bottom: 2rem;
}

    .page-header h1[b-xw6rntlyts] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.75rem;
        font-weight: 700;
        color: #1E293B;
        margin: 0 0 0.5rem;
    }

        .page-header h1 .rzi[b-xw6rntlyts] {
            color: #70AFFB;
        }

    .page-header p[b-xw6rntlyts] {
        color: #64748B;
        margin: 0;
    }

/* Test Grid */
.test-grid[b-xw6rntlyts] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* Test Card */
.test-card[b-xw6rntlyts] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.card-header[b-xw6rntlyts] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E2E8F0;
}

.step-number[b-xw6rntlyts] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.card-header h3[b-xw6rntlyts] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
}

.card-content[b-xw6rntlyts] {
    padding: 1.25rem;
}

/* Status Rows */
.status-row[b-xw6rntlyts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.9rem;
}

    .status-row:last-child[b-xw6rntlyts] {
        border-bottom: none;
    }

    .status-row span:first-child[b-xw6rntlyts] {
        color: #64748B;
    }

.status[b-xw6rntlyts] {
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

    .status.success[b-xw6rntlyts] {
        background: #D1FAE5;
        color: #065F46;
    }

    .status.error[b-xw6rntlyts] {
        background: #FEE2E2;
        color: #991B1B;
    }

    .status.warning[b-xw6rntlyts] {
        background: #FEF3C7;
        color: #92400E;
    }

    .status.info[b-xw6rntlyts] {
        background: #E0F2FE;
        color: #075985;
    }

/* Form Elements */
.form-group[b-xw6rntlyts] {
    margin-bottom: 0.5rem;
}

    .form-group label[b-xw6rntlyts] {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748B;
        margin-bottom: 0.35rem;
    }

.button-row[b-xw6rntlyts] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Message Boxes */
.success-box[b-xw6rntlyts],
.error-box[b-xw6rntlyts],
.warning-box[b-xw6rntlyts] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.success-box[b-xw6rntlyts] {
    background: #D1FAE5;
    color: #065F46;
}

    .success-box .rzi[b-xw6rntlyts] {
        color: #059669;
    }

.error-box[b-xw6rntlyts] {
    background: #FEE2E2;
    color: #991B1B;
}

    .error-box .rzi[b-xw6rntlyts] {
        color: #DC2626;
    }

.warning-box[b-xw6rntlyts] {
    background: #FEF3C7;
    color: #92400E;
}

    .warning-box .rzi[b-xw6rntlyts] {
        color: #D97706;
    }

/* Endpoint Display */
.endpoint-display[b-xw6rntlyts],
.key-display[b-xw6rntlyts] {
    background: #F8FAFC;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
}

    .endpoint-display strong[b-xw6rntlyts],
    .key-display strong[b-xw6rntlyts] {
        color: #64748B;
        display: block;
        margin-bottom: 0.25rem;
    }

    .endpoint-display code[b-xw6rntlyts],
    .key-display code[b-xw6rntlyts] {
        word-break: break-all;
        color: #1E293B;
        font-family: 'Consolas', monospace;
    }

.key-display[b-xw6rntlyts] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .key-display code[b-xw6rntlyts] {
        flex: 1;
    }

/* Debug Section */
.debug-section[b-xw6rntlyts] {
    background: #1E293B;
    border-radius: 12px;
    overflow: hidden;
}

.debug-header[b-xw6rntlyts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #0F172A;
}

    .debug-header h4[b-xw6rntlyts] {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #94A3B8;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .debug-header h4 .rzi[b-xw6rntlyts] {
            color: #22C55E;
        }

.debug-log[b-xw6rntlyts] {
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
}

.log-entry[b-xw6rntlyts] {
    display: flex;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #334155;
}

    .log-entry:last-child[b-xw6rntlyts] {
        border-bottom: none;
    }

.log-time[b-xw6rntlyts] {
    color: #64748B;
    flex-shrink: 0;
}

.log-message[b-xw6rntlyts] {
    color: #E2E8F0;
}

.log-entry.success .log-message[b-xw6rntlyts] {
    color: #4ADE80;
}

.log-entry.error .log-message[b-xw6rntlyts] {
    color: #F87171;
}

.log-entry.warning .log-message[b-xw6rntlyts] {
    color: #FBBF24;
}

.log-entry.info .log-message[b-xw6rntlyts] {
    color: #60A5FA;
}

.log-empty[b-xw6rntlyts] {
    color: #64748B;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Utilities */
.mt-2[b-xw6rntlyts] { margin-top: 0.5rem; }
.mt-3[b-xw6rntlyts] { margin-top: 1rem; }
.mt-4[b-xw6rntlyts] { margin-top: 1.5rem; }
.w-100[b-xw6rntlyts] { width: 100%; }

/* Responsive */
@media (max-width: 768px) {
    .push-test-page[b-xw6rntlyts] {
        padding: 1rem;
    }

    .test-grid[b-xw6rntlyts] {
        grid-template-columns: 1fr;
    }

    .page-header h1[b-xw6rntlyts] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/CoachingFeatures/AnalyticsFeature/Pages/CoachAnalytics.razor.rz.scp.css */
/* ???????????????????????????????????????????
   COACH ANALYTICS � Mobile-first BI Dashboard
   Tokens: primary #70AFFB, teal #32677E,
   accent #F97316, bg #F8F9FB, text #1E293B,
   border #E0E6EB, green #22C55E, red #EF4444,
   yellow #F59E0B
   ??????????????????????????????????????????? */

.analytics-page[b-2ljzzotgel] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 5rem;
    margin: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
}

/* ?? Header ?? */
.analytics-header[b-2ljzzotgel] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.analytics-title[b-2ljzzotgel] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.analytics-title .rzi[b-2ljzzotgel] {
    font-size: 22px;
    color: #70AFFB;
}

.analytics-subtitle[b-2ljzzotgel] {
    font-size: 0.75rem;
    color: #94A3B8;
    margin: 0;
}

/* ?? Range pills ?? */
.range-pills[b-2ljzzotgel] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.range-pill[b-2ljzzotgel] {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    border: 1px solid #E0E6EB;
    background: #F8FAFC;
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.range-pill.active[b-2ljzzotgel] {
    background: #1E293B;
    color: white;
    border-color: #1E293B;
}

/* ?? Filter chips ?? */
.filter-chips[b-2ljzzotgel] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-chips[b-2ljzzotgel]  .rz-dropdown {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
}

/* ?? Tab bar (segmented control) ?? */
.tab-bar[b-2ljzzotgel] {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: white;
    border-radius: 12px;
    border: 1px solid #E0E6EB;
    padding: 4px;
}

.tab-bar[b-2ljzzotgel]::-webkit-scrollbar {
    display: none;
}

.tab[b-2ljzzotgel] {
    flex-shrink: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tab .rzi[b-2ljzzotgel] {
    font-size: 16px;
}

.tab.active[b-2ljzzotgel] {
    background: #1E293B;
    color: white;
}

/* ?? Tab content ?? */
.tab-content[b-2ljzzotgel] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ?? Hero KPI row ?? */
.hero-row[b-2ljzzotgel] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.hero-row--3[b-2ljzzotgel] {
    grid-template-columns: repeat(3, 1fr);
}

.hero-kpi[b-2ljzzotgel] {
    background: white;
    border: 1px solid #E0E6EB;
    border-radius: 14px;
    padding: 0.85rem 0.65rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.hero-icon[b-2ljzzotgel] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.35rem;
}

.hero-icon .rzi[b-2ljzzotgel] {
    font-size: 20px;
}

.hero-value[b-2ljzzotgel] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.hero-label[b-2ljzzotgel] {
    font-size: 0.65rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.2rem;
    font-weight: 600;
}

.hero-hint[b-2ljzzotgel] {
    font-size: 0.65rem;
    color: #94A3B8;
    line-height: 1.3;
    margin-top: 0.25rem;
}

/* ?? Gauge rows (horizontal % bars) ?? */
.gauge-stack[b-2ljzzotgel] {
    background: white;
    border: 1px solid #E0E6EB;
    border-radius: 14px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.gauge-row[b-2ljzzotgel] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gauge-left[b-2ljzzotgel] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    width: 40%;
    min-width: 0;
}

.gauge-left .rzi[b-2ljzzotgel] {
    font-size: 16px;
    flex-shrink: 0;
}

.gauge-label[b-2ljzzotgel] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gauge-right[b-2ljzzotgel] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gauge-track[b-2ljzzotgel] {
    flex: 1;
    height: 8px;
    background: #F1F5F9;
    border-radius: 4px;
    overflow: hidden;
}

.gauge-fill[b-2ljzzotgel] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.gauge-pct[b-2ljzzotgel] {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
}

.gauge-hint[b-2ljzzotgel] {
    font-size: 0.65rem;
    color: #94A3B8;
    line-height: 1.3;
    padding: 0.15rem 0 0 calc(16px + 0.35rem);
}

/* ?? Mini KPI pair ?? */
.kpi-pair[b-2ljzzotgel] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.mini-kpi[b-2ljzzotgel] {
    background: white;
    border: 1px solid #E0E6EB;
    border-radius: 12px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.mini-kpi-icon[b-2ljzzotgel] {
    font-size: 18px;
    color: #70AFFB;
    margin-bottom: 0.15rem;
}

.mini-kpi-value[b-2ljzzotgel] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E293B;
}

.mini-kpi-label[b-2ljzzotgel] {
    font-size: 0.65rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

/* ?? Stat strip (inline chips) ?? */
.stat-strip[b-2ljzzotgel] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.stat-chip[b-2ljzzotgel] {
    background: white;
    border: 1px solid;
    border-radius: 10px;
    padding: 0.45rem 0.35rem;
    text-align: center;
}

.stat-chip-val[b-2ljzzotgel] {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-chip-lbl[b-2ljzzotgel] {
    display: block;
    font-size: 0.6rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-weight: 600;
}

/* ?? Chart cards ?? */
.chart-card[b-2ljzzotgel] {
    background: white;
    border: 1px solid #E0E6EB;
    border-radius: 14px;
    padding: 0.85rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.chart-card[b-2ljzzotgel]  .rz-chart {
    height: 200px;
    width: 100%;
}

.chart-card[b-2ljzzotgel]  .rz-category-axis .rz-tick-text {
    font-size: 0.7rem;
}

.chart-title[b-2ljzzotgel] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.chart-title .rzi[b-2ljzzotgel] {
    font-size: 18px;
}

.chart-subtitle[b-2ljzzotgel] {
    font-size: 0.7rem;
    color: #94A3B8;
    margin: 0 0 0.5rem;
}

.chart-hint[b-2ljzzotgel] {
    font-size: 0.7rem;
    color: #94A3B8;
    line-height: 1.35;
    margin: 0.15rem 0 0.5rem;
}

/* ?? List cards (replaces DataGrids) ?? */
.list-card[b-2ljzzotgel] {
    background: white;
    border: 1px solid #E0E6EB;
    border-radius: 14px;
    padding: 0.85rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.list-card--alert[b-2ljzzotgel] {
    border-color: #FCA5A5;
    background: #FFF5F5;
}

/* ?? Fighter row (engagement lists) ?? */
.fighter-row[b-2ljzzotgel] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.fighter-row:last-child[b-2ljzzotgel] {
    border-bottom: none;
}

.fighter-row-info[b-2ljzzotgel] {
    flex: 1;
    min-width: 0;
}

.fighter-row-name[b-2ljzzotgel] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fighter-row-sub[b-2ljzzotgel] {
    font-size: 0.7rem;
    color: #94A3B8;
}

.fighter-row-bar-wrap[b-2ljzzotgel] {
    width: 80px;
    flex-shrink: 0;
}

.fighter-row-bar[b-2ljzzotgel] {
    height: 6px;
    background: #F1F5F9;
    border-radius: 3px;
    overflow: hidden;
}

.fighter-row-fill[b-2ljzzotgel] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ?? Alert rows (attention/at-risk) ?? */
.alert-row[b-2ljzzotgel] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(239, 68, 68, 0.1);
}

.alert-row:last-child[b-2ljzzotgel] {
    border-bottom: none;
}

.alert-name[b-2ljzzotgel] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
}

.alert-reason[b-2ljzzotgel] {
    font-size: 0.72rem;
    color: #EF4444;
    text-align: right;
    flex-shrink: 0;
}

/* ?? Volatility rows ?? */
.volatility-row[b-2ljzzotgel] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.volatility-row:last-child[b-2ljzzotgel] {
    border-bottom: none;
}

.vol-name[b-2ljzzotgel] {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vol-avg[b-2ljzzotgel] {
    font-size: 0.72rem;
    color: #64748B;
    flex-shrink: 0;
}

.vol-dev[b-2ljzzotgel] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748B;
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
}

.vol-dev--high[b-2ljzzotgel] {
    color: #EF4444;
}

/* ?? Challenge rows ?? */
.challenge-row[b-2ljzzotgel] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.challenge-row:last-child[b-2ljzzotgel] {
    border-bottom: none;
}

.challenge-info[b-2ljzzotgel] {
    flex: 1;
    min-width: 0;
}

.challenge-name[b-2ljzzotgel] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-meta[b-2ljzzotgel] {
    font-size: 0.7rem;
    color: #94A3B8;
}

.challenge-stats[b-2ljzzotgel] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.challenge-stat[b-2ljzzotgel] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.challenge-stat .rzi[b-2ljzzotgel] {
    font-size: 14px;
}

/* ??? Desktop (768px+) ??? */
@media (min-width: 768px) {
.analytics-page[b-2ljzzotgel] {
    gap: 1rem;
    margin: -0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
}

    .analytics-title[b-2ljzzotgel] {
        font-size: 1.4rem;
    }

    .analytics-title .rzi[b-2ljzzotgel] {
        font-size: 26px;
    }

    .hero-kpi[b-2ljzzotgel] {
        padding: 1.1rem 1rem;
    }

    .hero-value[b-2ljzzotgel] {
        font-size: 1.8rem;
    }

    .hero-label[b-2ljzzotgel] {
        font-size: 0.7rem;
    }

    .hero-icon[b-2ljzzotgel] {
        width: 42px;
        height: 42px;
    }

    .hero-icon .rzi[b-2ljzzotgel] {
        font-size: 24px;
    }

    .hero-row--3[b-2ljzzotgel] {
        grid-template-columns: repeat(3, 1fr);
    }

    .gauge-left[b-2ljzzotgel] {
        width: 30%;
    }

    .gauge-label[b-2ljzzotgel] {
        font-size: 0.82rem;
    }

    .gauge-track[b-2ljzzotgel] {
        height: 10px;
    }

    .chart-card[b-2ljzzotgel]  .rz-chart {
        height: 240px;
    }

    .filter-chips[b-2ljzzotgel]  .rz-dropdown {
        flex: none;
        min-width: 180px;
    }

    .fighter-row-bar-wrap[b-2ljzzotgel] {
        width: 120px;
    }

    .stat-chip-val[b-2ljzzotgel] {
        font-size: 1.15rem;
    }
}
/* /Components/Pages/CoachingFeatures/ChatFeature/Components/MessagesDialog.razor.rz.scp.css */
.messages-page[b-769eqaquc3] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
    max-width: 480px;
    margin: 0 auto;
    background: #F8FAFC;
    position: relative;
}

/* Desktop wrapper styling */
@media (min-width: 640px) {
    .messages-page[b-769eqaquc3] {
        box-shadow: 0 0 30px rgba(0,0,0,0.1);
        border-left: 1px solid #E2E8F0;
        border-right: 1px solid #E2E8F0;
    }
}

/* Header */
.messages-header[b-769eqaquc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-btn[b-769eqaquc3],
.action-btn[b-769eqaquc3] {
    background: #F1F5F9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.back-btn:hover[b-769eqaquc3],
.action-btn:hover[b-769eqaquc3] {
    background: #E2E8F0;
}

/* Use ::deep for child components in isolated CSS */
.back-btn :deep(.rzi)[b-769eqaquc3],
.action-btn :deep(.rzi)[b-769eqaquc3] {
    font-size: 22px;
    color: #64748B;
}

.action-btn[b-769eqaquc3] {
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white !important;
}

.action-btn :deep(.rzi)[b-769eqaquc3] {
    color: white;
}

.header-content[b-769eqaquc3] {
    flex: 1;
}

.header-content h1[b-769eqaquc3] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.header-subtitle[b-769eqaquc3] {
    font-size: 0.75rem;
    color: #64748B;
}

/* Search */
.search-container[b-769eqaquc3] {
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #E2E8F0;
}

.search-wrapper[b-769eqaquc3] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-769eqaquc3] {
    position: absolute;
    left: 12px;
    color: #94A3B8;
    pointer-events: none;
}

.search-input[b-769eqaquc3] {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 40px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 0.9rem;
    background: #F8FAFC;
    transition: all 0.15s;
}

.search-input:focus[b-769eqaquc3] {
    outline: none;
    border-color: #70AFFB;
    background: white;
}

.search-input[b-769eqaquc3]::placeholder {
    color: #94A3B8;
}

.clear-search[b-769eqaquc3] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px;
    display: flex;
}

/* Conversation List */
.conversation-list-container[b-769eqaquc3] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    padding-bottom: 100px;
}

.loading-state[b-769eqaquc3],
.empty-state[b-769eqaquc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #64748B;
}

.loading-icon[b-769eqaquc3] {
    font-size: 48px;
    color: #CBD5E1;
    animation: spin-b-769eqaquc3 1s linear infinite;
}

@keyframes spin-b-769eqaquc3 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.empty-icon-wrapper[b-769eqaquc3] {
    width: 72px;
    height: 72px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.empty-state h3[b-769eqaquc3] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
}

.empty-state p[b-769eqaquc3] {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}

.empty-cta[b-769eqaquc3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Conversation Card */
.conversation-card[b-769eqaquc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: white;
    border-radius: 14px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.conversation-card:hover[b-769eqaquc3] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.conversation-card.unread[b-769eqaquc3] {
    border-left: 4px solid #70AFFB;
    background: linear-gradient(90deg, #F0F7FF 0%, white 30%);
}

.conversation-card.locked[b-769eqaquc3] {
    opacity: 0.75;
}

/* Avatar */
.conversation-avatar[b-769eqaquc3] {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.avatar-img-conv[b-769eqaquc3] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-initials-conv[b-769eqaquc3] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #70AFFB;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.avatar-split-conv[b-769eqaquc3] {
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-split-conv > div[b-769eqaquc3] {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.avatar-grid-conv[b-769eqaquc3] {
    width: 50px;
    height: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 50%;
    overflow: hidden;
    background: #E5E7EB;
}

.avatar-grid-conv > div[b-769eqaquc3] {
    overflow: hidden;
}

.avatar-mini-conv[b-769eqaquc3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-mini-initials-conv[b-769eqaquc3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #70AFFB;
    color: white;
    font-weight: 600;
    font-size: 0.5rem;
}

/* Content */
.conversation-content[b-769eqaquc3] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.conversation-header[b-769eqaquc3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-title[b-769eqaquc3] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-time[b-769eqaquc3] {
    font-size: 0.7rem;
    color: #94A3B8;
    flex-shrink: 0;
}

.conversation-preview-row[b-769eqaquc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conversation-preview[b-769eqaquc3] {
    flex: 1;
    font-size: 0.82rem;
    color: #64748B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-preview.unread[b-769eqaquc3] {
    font-weight: 600;
    color: #1E293B;
}

.thread-badge[b-769eqaquc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

.thread-badge.broadcast[b-769eqaquc3] {
    background: #FEF3C7;
}

.thread-badge.locked[b-769eqaquc3] {
    background: #FEE2E2;
}

.unread-badge[b-769eqaquc3] {
    min-width: 20px;
    height: 20px;
    background: #70AFFB;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0 5px;
}

.conversation-arrow[b-769eqaquc3] {
    color: #CBD5E1;
    font-size: 20px;
    flex-shrink: 0;
}

/* FAB */
.fab-new[b-769eqaquc3] {
    position: fixed;
    bottom: 90px;
    right: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(50, 103, 126, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 100;
}

.fab-new:hover[b-769eqaquc3] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(50, 103, 126, 0.5);
}
/* /Components/Pages/CoachingFeatures/ChatFeature/Pages/MessagesPage.razor.rz.scp.css */
/* MessagesPage � scoped styles */

.messages-header[b-k97dtzagpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
}

.messages-header h3[b-k97dtzagpr] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-text, #1E293B);
}

.conversation-list[b-k97dtzagpr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conversation-card[b-k97dtzagpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cl-card, #FFFFFF);
    border-radius: var(--cl-radius-md, 12px);
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--cl-border, #E0E6EB);
}

.conversation-card:hover[b-k97dtzagpr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.conversation-left[b-k97dtzagpr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.conversation-icon[b-k97dtzagpr] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(112, 175, 251, 0.10);
    border-radius: 10px;
    flex-shrink: 0;
}

.conversation-icon i.rzi[b-k97dtzagpr] {
    font-size: 20px;
    color: var(--cl-primary, #70AFFB);
}

.conversation-info[b-k97dtzagpr] {
    min-width: 0;
    flex: 1;
}

.conversation-title[b-k97dtzagpr] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cl-text, #1E293B);
    margin-bottom: 0.125rem;
}

.conversation-preview[b-k97dtzagpr] {
    font-size: 0.825rem;
    color: var(--cl-text-secondary, #6C757D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-chevron[b-k97dtzagpr] {
    font-size: 20px;
    color: var(--cl-text-secondary, #6C757D);
    flex-shrink: 0;
    margin-left: 0.5rem;
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Components/EditFighterProfileDialog.razor.rz.scp.css */
/* ===========================
   Edit Fighter Profile Dialog
   =========================== */

.efp-dialog[b-zq4oflj770] {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.efp-body[b-zq4oflj770] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
}

/* ??? Avatar ??? */

.efp-avatar-section[b-zq4oflj770] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0 1rem;
}

.efp-avatar-ring[b-zq4oflj770] {
    position: relative;
    width: 100px;
    height: 100px;
}

.efp-avatar-img[b-zq4oflj770],
.efp-avatar-fallback[b-zq4oflj770] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cl-primary, #70AFFB);
    box-shadow: 0 4px 16px rgba(112, 175, 251, 0.25);
}

.efp-avatar-fallback[b-zq4oflj770] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cl-primary, #70AFFB), var(--cl-primary-deep, #32677E));
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.efp-avatar-edit-btn[b-zq4oflj770] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cl-primary, #70AFFB);
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    transition: transform 0.15s ease, background 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.efp-avatar-edit-btn:hover[b-zq4oflj770] {
    background: var(--cl-primary-deep, #32677E);
    transform: scale(1.1);
}

.efp-avatar-edit-btn .rzi[b-zq4oflj770] {
    font-size: 16px;
}

.efp-avatar-name[b-zq4oflj770] {
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cl-text-main, #111827);
}

.efp-upload-indicator[b-zq4oflj770] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--cl-text-muted, #6B7280);
}

/* ??? Sections ??? */

.efp-section[b-zq4oflj770] {
    margin-bottom: 0.75rem;
    background: var(--cl-card-bg, #fff);
    border: 1px solid var(--rz-border-color, #E0E6EB);
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.efp-section-header[b-zq4oflj770] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rz-border-color, #E0E6EB);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--cl-text-main, #111827);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.efp-section-header .rzi[b-zq4oflj770] {
    font-size: 18px;
    color: var(--cl-primary, #70AFFB);
}

/* ??? Fields ??? */

.efp-field[b-zq4oflj770] {
    margin-bottom: 1rem;
}

.efp-field:last-child[b-zq4oflj770] {
    margin-bottom: 0;
}

.efp-field label[b-zq4oflj770] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cl-text-muted, #6B7280);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ??? Grid Rows ??? */

.efp-row-2[b-zq4oflj770] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.efp-row-2:last-child[b-zq4oflj770] {
    margin-bottom: 0;
}

.efp-row-2 .efp-field[b-zq4oflj770] {
    margin-bottom: 0;
}

.efp-row-3[b-zq4oflj770] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.efp-row-3 .efp-field[b-zq4oflj770] {
    margin-bottom: 0;
}

/* ??? Preference Card ??? */

.efp-pref-card[b-zq4oflj770] {
    background: #F8FAFC;
    border: 1px solid var(--rz-border-color, #E0E6EB);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.efp-pref-label[b-zq4oflj770] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cl-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.5rem;
}

.efp-pref-label .rzi[b-zq4oflj770] {
    font-size: 16px;
    color: var(--cl-primary, #70AFFB);
}

.efp-pref-hint[b-zq4oflj770] {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--cl-text-soft, #9CA3AF);
}

/* ??? Open to Fight Card ??? */

.efp-otf-card[b-zq4oflj770] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--rz-border-color, #E0E6EB);
    background: #F8FAFC;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.efp-otf-active[b-zq4oflj770] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.12));
    border-color: rgba(34, 197, 94, 0.3);
}

.efp-otf-info[b-zq4oflj770] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.efp-otf-active .efp-otf-info .rzi[b-zq4oflj770] {
    color: #16A34A;
}

.efp-otf-title[b-zq4oflj770] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cl-text-main, #111827);
}

.efp-otf-desc[b-zq4oflj770] {
    display: block;
    font-size: 0.78rem;
    color: var(--cl-text-muted, #6B7280);
}

/* ??? Status Pill ??? */

.efp-status-pill[b-zq4oflj770] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}

.efp-status-pro[b-zq4oflj770] {
    background: linear-gradient(135deg, #22C55E, #16A34A);
}

.efp-status-am[b-zq4oflj770] {
    background: linear-gradient(135deg, var(--cl-primary, #70AFFB), #3B82F6);
}

.efp-status-since[b-zq4oflj770] {
    font-weight: 400;
    opacity: 0.85;
    font-size: 0.78rem;
}

/* ??? Footer ??? */

.efp-footer[b-zq4oflj770] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--rz-border-color, #E0E6EB);
    background: #F8FAFC;
}

.efp-btn-cancel[b-zq4oflj770] {
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--rz-border-color, #E0E6EB);
    background: #fff;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cl-text-muted, #6B7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.efp-btn-cancel:hover[b-zq4oflj770] {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.efp-btn-save[b-zq4oflj770] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    border: none;
    background: linear-gradient(135deg, var(--cl-primary, #70AFFB), var(--cl-primary-deep, #32677E));
    color: #fff;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(112, 175, 251, 0.25);
}

.efp-btn-save:hover:not(:disabled)[b-zq4oflj770] {
    box-shadow: 0 4px 14px rgba(112, 175, 251, 0.4);
    transform: translateY(-1px);
}

.efp-btn-save:disabled[b-zq4oflj770] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.efp-btn-save .rzi[b-zq4oflj770] {
    font-size: 18px;
}

/* ??? Responsive ??? */

@media (max-width: 520px) {
    .efp-row-2[b-zq4oflj770],
    .efp-row-3[b-zq4oflj770] {
        grid-template-columns: 1fr;
    }

    .efp-body[b-zq4oflj770] {
        padding: 0 1rem 1rem;
    }

    .efp-section[b-zq4oflj770] {
        padding: 0.85rem 1rem;
    }

    .efp-footer[b-zq4oflj770] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Components/FightCard.razor.rz.scp.css */
/* ===== ENHANCED FIGHT CARD ===== */
.fight-card-enhanced[b-x5lz1ml7fl] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #E2E8F0;
    margin-bottom: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fight-card-enhanced:hover[b-x5lz1ml7fl] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Result Banner */
.result-banner[b-x5lz1ml7fl] {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.result-banner.result-win[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: white;
}

.result-banner.result-loss[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
}

.result-banner.result-draw[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
}

.result-banner.result-nc[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    color: white;
}

.pro-badge[b-x5lz1ml7fl] {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Main Content */
.fight-main-content[b-x5lz1ml7fl] {
    padding: 1rem;
}

/* VS Section */
.fight-vs-section[b-x5lz1ml7fl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #F1F5F9;
}

.opponent-info[b-x5lz1ml7fl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.vs-label[b-x5lz1ml7fl] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.opponent-name[b-x5lz1ml7fl] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.fight-result-icon[b-x5lz1ml7fl] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fight-result-icon .rzi[b-x5lz1ml7fl] {
    font-size: 24px;
}

.fight-result-icon.result-win[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.25));
    color: #16A34A;
}

.fight-result-icon.result-loss[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.25));
    color: #DC2626;
}

.fight-result-icon.result-draw[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
    color: #D97706;
}

.fight-result-icon.result-nc[b-x5lz1ml7fl] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.15), rgba(71, 85, 105, 0.25));
    color: #64748B;
}

/* Details Grid */
.fight-details-grid[b-x5lz1ml7fl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.detail-item[b-x5lz1ml7fl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #F8FAFC;
    border-radius: 10px;
    border: 1px solid #E8EDF2;
}

.detail-item > .rzi[b-x5lz1ml7fl] {
    font-size: 18px;
    color: #70AFFB;
    flex-shrink: 0;
}

.detail-content[b-x5lz1ml7fl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.detail-label[b-x5lz1ml7fl] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-x5lz1ml7fl] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Event Banner */
.fight-event-banner[b-x5lz1ml7fl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(135deg, #F0F7FF 0%, #E0F2FE 100%);
    border-radius: 10px;
    border: 1px solid rgba(112, 175, 251, 0.3);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0369A1;
}

.fight-event-banner .rzi[b-x5lz1ml7fl] {
    font-size: 18px;
    color: #70AFFB;
}

/* Video Section */
.fight-video-section[b-x5lz1ml7fl] {
    margin-bottom: 1rem;
}

.video-preview-btn[b-x5lz1ml7fl] {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.video-thumbnail[b-x5lz1ml7fl] {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: #1E293B;
    position: relative;
}

.play-overlay[b-x5lz1ml7fl] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.video-preview-btn:hover .play-overlay[b-x5lz1ml7fl] {
    background: rgba(0, 0, 0, 0.5);
}

.play-overlay .rzi[b-x5lz1ml7fl] {
    font-size: 64px;
    color: white;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
}

.video-preview-btn:hover .play-overlay .rzi[b-x5lz1ml7fl] {
    transform: scale(1.1);
}

.watch-label[b-x5lz1ml7fl] {
    padding: 0.65rem;
    background: #1E293B;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.watch-label .rzi[b-x5lz1ml7fl] {
    font-size: 18px;
}

.video-embed[b-x5lz1ml7fl] {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.video-embed iframe[b-x5lz1ml7fl] {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
}

.video-toggle-btn[b-x5lz1ml7fl] {
    width: 100%;
    padding: 0.5rem;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    color: #64748B;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
}

.video-toggle-btn:hover[b-x5lz1ml7fl] {
    background: #E2E8F0;
    color: #475569;
}

.video-toggle-btn .rzi[b-x5lz1ml7fl] {
    font-size: 16px;
}

/* Notes */
.fight-notes[b-x5lz1ml7fl] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #FFFBEB;
    border-radius: 10px;
    border: 1px solid #FDE68A;
    font-size: 0.85rem;
    color: #92400E;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.fight-notes .rzi[b-x5lz1ml7fl] {
    font-size: 18px;
    color: #D97706;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Actions Footer */
.fight-actions-footer[b-x5lz1ml7fl] {
    display: flex;
    border-top: 1px solid #F1F5F9;
}

.fight-actions-footer .action-btn[b-x5lz1ml7fl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fight-actions-footer .action-btn .rzi[b-x5lz1ml7fl] {
    font-size: 18px;
}

.fight-actions-footer .action-btn.edit[b-x5lz1ml7fl] {
    color: #0369A1;
    border-right: 1px solid #F1F5F9;
}

.fight-actions-footer .action-btn.edit:hover[b-x5lz1ml7fl] {
    background: #E0F2FE;
}

.fight-actions-footer .action-btn.delete[b-x5lz1ml7fl] {
    color: #DC2626;
}

.fight-actions-footer .action-btn.delete:hover[b-x5lz1ml7fl] {
    background: #FEE2E2;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .fight-details-grid[b-x5lz1ml7fl] {
        grid-template-columns: 1fr;
    }
    
    .opponent-name[b-x5lz1ml7fl] {
        font-size: 1.1rem;
    }
    
    .fight-result-icon[b-x5lz1ml7fl] {
        width: 40px;
        height: 40px;
    }
    
    .fight-result-icon .rzi[b-x5lz1ml7fl] {
        font-size: 20px;
    }
    
    .play-overlay .rzi[b-x5lz1ml7fl] {
        font-size: 48px;
    }
}

/* ===== LEGACY SUPPORT (for any remaining old FightCard usage) ===== */
.fight-card[b-x5lz1ml7fl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: white;
    border: 1px solid #E2E8F0;
    margin-bottom: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fight-card:hover[b-x5lz1ml7fl] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Components/FighterCareerTab.razor.rz.scp.css */
/* ===== FIGHTER CAREER TAB ===== */
.career-tab[b-ls7d8zp82a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Career Stats Header */
.career-stats-header[b-ls7d8zp82a] {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    border-radius: 20px;
    padding: 1.5rem;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.overall-record[b-ls7d8zp82a] {
    text-align: center;
}

.record-display[b-ls7d8zp82a] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.record-display .wins[b-ls7d8zp82a] {
    color: #4ADE80;
}

.record-display .losses[b-ls7d8zp82a] {
    color: #F87171;
}

.record-display .draws[b-ls7d8zp82a] {
    color: #FBBF24;
}

.record-display .separator[b-ls7d8zp82a] {
    color: rgba(255, 255, 255, 0.4);
}

.record-display .nc-count[b-ls7d8zp82a] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0.5rem;
}

.record-label[b-ls7d8zp82a] {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.25rem;
}

/* Stats Breakdown */
.stats-breakdown[b-ls7d8zp82a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

/* Win Rate Ring */
.stat-ring[b-ls7d8zp82a] {
    position: relative;
    width: 80px;
    height: 80px;
}

.stat-ring svg[b-ls7d8zp82a] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-bg[b-ls7d8zp82a] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3;
}

.ring-fill[b-ls7d8zp82a] {
    fill: none;
    stroke: #4ADE80;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.stat-center[b-ls7d8zp82a] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-center .stat-value[b-ls7d8zp82a] {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
}

.stat-center .stat-label[b-ls7d8zp82a] {
    font-size: 0.55rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Finish Stats */
.finish-stats[b-ls7d8zp82a] {
    display: flex;
    gap: 1rem;
}

.finish-stat[b-ls7d8zp82a] {
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 50px;
}

.finish-count[b-ls7d8zp82a] {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
}

.finish-label[b-ls7d8zp82a] {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Add Fight Section */
.add-fight-section[b-ls7d8zp82a] {
    margin-top: -0.5rem;
}

/* Filter Toggle */
.fight-filter-toggle[b-ls7d8zp82a] {
    display: flex;
    background: #F1F5F9;
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}

.filter-btn[b-ls7d8zp82a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover[b-ls7d8zp82a] {
    background: rgba(255, 255, 255, 0.5);
}

.filter-btn.active[b-ls7d8zp82a] {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-label[b-ls7d8zp82a] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.filter-btn.active .filter-label[b-ls7d8zp82a] {
    color: #1E293B;
}

.filter-count[b-ls7d8zp82a] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #94A3B8;
}

.filter-btn.active .filter-count[b-ls7d8zp82a] {
    color: #70AFFB;
}

.filter-btn.pro.active .filter-count[b-ls7d8zp82a] {
    color: #22C55E;
}

.filter-btn.amateur.active .filter-count[b-ls7d8zp82a] {
    color: #3B82F6;
}

/* Empty States */
.empty-career-state[b-ls7d8zp82a] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: white;
    border-radius: 20px;
    border: 2px dashed #E0E6EB;
}

.empty-icon-wrapper[b-ls7d8zp82a] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #F0F7FF 0%, #E0F2FE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon-wrapper .rzi[b-ls7d8zp82a] {
    font-size: 40px;
    color: #70AFFB;
}

.empty-career-state h4[b-ls7d8zp82a] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.empty-career-state p[b-ls7d8zp82a] {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #64748B;
}

.empty-filter-state[b-ls7d8zp82a] {
    text-align: center;
    padding: 2rem;
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #E0E6EB;
}

.empty-filter-state .rzi[b-ls7d8zp82a] {
    font-size: 48px;
    color: #CBD5E1;
    display: block;
    margin-bottom: 0.75rem;
}

.empty-filter-state p[b-ls7d8zp82a] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748B;
}

/* Fight History Container */
.fight-history-container[b-ls7d8zp82a] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Section Divider */
.section-divider[b-ls7d8zp82a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.divider-line[b-ls7d8zp82a] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E2E8F0, transparent);
}

.divider-badge[b-ls7d8zp82a] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.section-divider.pro .divider-badge[b-ls7d8zp82a] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.25));
    color: #16A34A;
}

.section-divider.pro .divider-badge .rzi[b-ls7d8zp82a] {
    color: #22C55E;
}

.section-divider.amateur .divider-badge[b-ls7d8zp82a] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.25));
    color: #1D4ED8;
}

.section-divider.amateur .divider-badge .rzi[b-ls7d8zp82a] {
    color: #3B82F6;
}

.divider-badge .rzi[b-ls7d8zp82a] {
    font-size: 16px;
}

/* Fight List */
.fight-list[b-ls7d8zp82a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .career-stats-header[b-ls7d8zp82a] {
        padding: 1.25rem 1rem;
    }
    
    .record-display[b-ls7d8zp82a] {
        font-size: 2rem;
    }
    
    .stats-breakdown[b-ls7d8zp82a] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-ring[b-ls7d8zp82a] {
        width: 70px;
        height: 70px;
    }
    
    .finish-stats[b-ls7d8zp82a] {
        width: 100%;
        justify-content: center;
    }
    
    .finish-stat[b-ls7d8zp82a] {
        flex: 1;
    }
    
    .filter-btn[b-ls7d8zp82a] {
        padding: 0.5rem 0.35rem;
    }
    
    .filter-label[b-ls7d8zp82a] {
        font-size: 0.7rem;
    }
    
    .filter-count[b-ls7d8zp82a] {
        font-size: 1rem;
    }
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Components/LogWeightDialog.razor.rz.scp.css */
.weight-dialog[b-0ppsxq0ajz] {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.dialog-content[b-0ppsxq0ajz] {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* HERO - Weight Display */
.weight-hero[b-0ppsxq0ajz] {
    background: linear-gradient(135deg, #191A2F 0%, #10335E 100%);
    padding: 1.5rem;
    color: white;
    text-align: center;
}

.unit-switcher-top[b-0ppsxq0ajz] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.unit-btn[b-0ppsxq0ajz] {
    padding: 0.5rem 1.25rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.unit-btn.active[b-0ppsxq0ajz] {
    background: white;
    border-color: white;
    color: #10335E;
}

.weight-display[b-0ppsxq0ajz] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

/* Fixed-width weight value to prevent jumping */
.weight-value[b-0ppsxq0ajz] {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: -0.02em;
    min-width: 5.5ch; /* Reserve space for XXX.X format */
    text-align: right;
}

.weight-unit[b-0ppsxq0ajz] {
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.8;
    min-width: 2.5rem;
    text-align: left;
}

.conversion-hint[b-0ppsxq0ajz] {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Scale Slider Container - Full Width */
.scale-container[b-0ppsxq0ajz] {
    position: relative;
    padding: 1rem 0;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    overflow: hidden;
    width: 100%;
}

/* Center Indicator Arrow */
.scale-indicator[b-0ppsxq0ajz] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.indicator-arrow[b-0ppsxq0ajz] {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #EF4444;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.indicator-arrow[b-0ppsxq0ajz]::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background: linear-gradient(180deg, #EF4444 0%, rgba(239, 68, 68, 0) 100%);
}

/* Scale Track - Full Width */
.scale-track[b-0ppsxq0ajz] {
    height: 80px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-x;
    user-select: none;
    position: relative;
    width: 100%;
}

.scale-track:active[b-0ppsxq0ajz] {
    cursor: grabbing;
}

/* The Ruler - Full Width */
.scale-ruler[b-0ppsxq0ajz] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding-top: 20px;
    transition: transform 0.05s ease-out;
    width: 100%;
}

/* Tick Marks - Dynamic width to fill container */
.scale-tick[b-0ppsxq0ajz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0; /* Flex to fill available space evenly */
    min-width: 0;
    max-width: 8px;
}

.tick-line[b-0ppsxq0ajz] {
    width: 1px;
    background: #CBD5E1;
    transition: all 0.1s;
}

/* Minor ticks (0.1 increments) */
.scale-tick.minor .tick-line[b-0ppsxq0ajz] {
    height: 12px;
    background: #E2E8F0;
}

/* Medium ticks (0.5 increments) */
.scale-tick.medium .tick-line[b-0ppsxq0ajz] {
    height: 20px;
    width: 2px;
    background: #94A3B8;
}

/* Major ticks (1.0 increments - whole numbers with labels) */
.scale-tick.major .tick-line[b-0ppsxq0ajz] {
    height: 32px;
    width: 2px;
    background: #475569;
}

.tick-label[b-0ppsxq0ajz] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #334155;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Quick Adjust Buttons - Redesigned with fine-tune arrows */
.quick-adjust[b-0ppsxq0ajz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #F8FAFC;
    border-bottom: 1px solid #E5E7EB;
}

.adjust-group[b-0ppsxq0ajz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.adjust-group.decrease[b-0ppsxq0ajz] {
    flex-direction: row;
}

.adjust-group.increase[b-0ppsxq0ajz] {
    flex-direction: row;
}

/* Fine-tune arrow buttons on edges */
.fine-btn[b-0ppsxq0ajz] {
    width: 36px;
    height: 36px;
    border: 2px solid #E5E7EB;
    border-radius: 50%;
    background: white;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.fine-btn:active[b-0ppsxq0ajz] {
    transform: scale(0.9);
    background: #F1F5F9;
    border-color: #10335E;
}

.fine-btn i[b-0ppsxq0ajz] {
    font-size: 1.25rem;
}

.adjust-group.decrease .fine-btn[b-0ppsxq0ajz] {
    color: #DC2626;
}

.adjust-group.increase .fine-btn[b-0ppsxq0ajz] {
    color: #059669;
}

/* Standard adjust buttons */
.adjust-btn[b-0ppsxq0ajz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.625rem;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    background: white;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 44px;
}

.adjust-btn:active[b-0ppsxq0ajz] {
    transform: scale(0.95);
    background: #F1F5F9;
}

.adjust-btn i[b-0ppsxq0ajz] {
    font-size: 1rem;
}

.adjust-btn.large[b-0ppsxq0ajz] {
    padding: 0.5rem 0.75rem;
    min-width: 52px;
}

.adjust-btn.large i[b-0ppsxq0ajz] {
    font-size: 1.125rem;
}

.adjust-group.decrease .adjust-btn[b-0ppsxq0ajz] {
    border-color: #FECACA;
    background: #FEF2F2;
}

.adjust-group.decrease .adjust-btn i[b-0ppsxq0ajz] {
    color: #DC2626;
}

.adjust-group.decrease .adjust-btn:active[b-0ppsxq0ajz] {
    background: #FEE2E2;
    border-color: #DC2626;
}

.adjust-group.increase .adjust-btn[b-0ppsxq0ajz] {
    border-color: #A7F3D0;
    background: #ECFDF5;
}

.adjust-group.increase .adjust-btn i[b-0ppsxq0ajz] {
    color: #059669;
}

.adjust-group.increase .adjust-btn:active[b-0ppsxq0ajz] {
    background: #D1FAE5;
    border-color: #059669;
}

/* Fine display in center */
.fine-display[b-0ppsxq0ajz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.fine-label[b-0ppsxq0ajz] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fine-value[b-0ppsxq0ajz] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
}

/* Scale hint */
.scale-hint[b-0ppsxq0ajz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #94A3B8;
}

.scale-hint i[b-0ppsxq0ajz] {
    font-size: 1rem;
}

/* Form Fields */
.form-fields[b-0ppsxq0ajz] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.field-group[b-0ppsxq0ajz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label[b-0ppsxq0ajz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.field-label .optional[b-0ppsxq0ajz] {
    font-weight: 400;
    color: #9CA3AF;
}

/* Date Field */
.date-field :deep(.rz-datepicker)[b-0ppsxq0ajz] {
    width: 100%;
}

.date-field :deep(input)[b-0ppsxq0ajz] {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    font-size: 1rem;
    background: #F9FAFB;
}

.date-field :deep(input:focus)[b-0ppsxq0ajz] {
    border-color: #10335E;
    background: white;
    outline: none;
}

/* Time Options */
.time-options[b-0ppsxq0ajz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.time-option[b-0ppsxq0ajz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    background: #F9FAFB;
    color: #6B7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.time-option:active[b-0ppsxq0ajz] {
    transform: scale(0.97);
}

.time-option i[b-0ppsxq0ajz] {
    font-size: 1.1rem;
}

.time-option.selected[b-0ppsxq0ajz] {
    border-color: #10335E;
    background: #EEF2FF;
    color: #10335E;
}

.time-option.selected i[b-0ppsxq0ajz] {
    color: #10335E;
}

/* Notes */
.notes-input[b-0ppsxq0ajz] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #F9FAFB;
    resize: none;
}

.notes-input:focus[b-0ppsxq0ajz] {
    border-color: #10335E;
    background: white;
    outline: none;
}

.notes-input[b-0ppsxq0ajz]::placeholder {
    color: #9CA3AF;
}

/* Footer */
.dialog-footer[b-0ppsxq0ajz] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.btn-cancel[b-0ppsxq0ajz] {
    flex: 1;
    height: 48px;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    background: white;
    color: #6B7280;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover[b-0ppsxq0ajz] {
    background: #F3F4F6;
}

.btn-cancel:active[b-0ppsxq0ajz] {
    transform: scale(0.98);
}

.btn-save[b-0ppsxq0ajz] {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    border: none;
    border-radius: 10px;
    background: #10B981;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-save:hover:not(:disabled)[b-0ppsxq0ajz] {
    background: #059669;
}

.btn-save:active:not(:disabled)[b-0ppsxq0ajz] {
    transform: scale(0.98);
}

.btn-save:disabled[b-0ppsxq0ajz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-save i[b-0ppsxq0ajz] {
    font-size: 1.25rem;
}

.btn-save.loading[b-0ppsxq0ajz] {
    pointer-events: none;
}

.loader[b-0ppsxq0ajz] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@@keyframes spin {
    to[b-0ppsxq0ajz] {
        transform: rotate(360deg);
    }
}

/* Responsive */
@@media (max-width: 400px) {
    .weight-value[b-0ppsxq0ajz] {
        font-size: 3rem;
        min-width: 4.5ch;
    }

    .weight-unit[b-0ppsxq0ajz] {
        font-size: 1.25rem;
    }

    .time-option[b-0ppsxq0ajz] {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }

    .time-option i[b-0ppsxq0ajz] {
        font-size: 1rem;
    }

    .adjust-btn[b-0ppsxq0ajz] {
        min-width: 40px;
        padding: 0.375rem 0.5rem;
    }

    .adjust-btn.large[b-0ppsxq0ajz] {
        min-width: 46px;
    }

    .fine-btn[b-0ppsxq0ajz] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Components/SessionCard.razor.rz.scp.css */
/* Session Card Styles */
.session-card[b-kgfpjlgvc6] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #FAFBFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
}

.session-card.today[b-kgfpjlgvc6] {
    background: #EFF6FF;
    border-color: #3B82F6;
}

.session-card.completed[b-kgfpjlgvc6] {
    opacity: 0.7;
    background: #F8FAFC;
}

.session-card.completed .session-title[b-kgfpjlgvc6] {
    text-decoration: line-through;
    color: #94A3B8;
}

.session-check[b-kgfpjlgvc6] {
    padding-top: 2px;
}

.session-check input[type="checkbox"][b-kgfpjlgvc6] {
    width: 20px;
    height: 20px;
    accent-color: #22C55E;
    cursor: pointer;
}

.session-content[b-kgfpjlgvc6] {
    flex: 1;
    min-width: 0;
}

.session-header-row[b-kgfpjlgvc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.session-type-badge[b-kgfpjlgvc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.session-type-badge .rzi[b-kgfpjlgvc6] {
    font-size: 12px;
}

.session-duration[b-kgfpjlgvc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #64748B;
}

.session-duration .rzi[b-kgfpjlgvc6] {
    font-size: 14px;
}

.session-title[b-kgfpjlgvc6] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1E293B;
    margin-bottom: 0.25rem;
}

.session-description[b-kgfpjlgvc6] {
    font-size: 0.8rem;
    color: #64748B;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.session-date[b-kgfpjlgvc6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #94A3B8;
}

.session-date .rzi[b-kgfpjlgvc6] {
    font-size: 14px;
}

/* Checklist */
.session-checklist[b-kgfpjlgvc6] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #E2E8F0;
}

.checklist-header[b-kgfpjlgvc6] {
    margin-bottom: 0.5rem;
}

.checklist-progress[b-kgfpjlgvc6] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

.checklist-items[b-kgfpjlgvc6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checklist-item[b-kgfpjlgvc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.checklist-item.done .item-title[b-kgfpjlgvc6] {
    text-decoration: line-through;
    color: #94A3B8;
}

.checklist-item input[type="checkbox"][b-kgfpjlgvc6] {
    width: 16px;
    height: 16px;
    accent-color: #22C55E;
    cursor: pointer;
}

.item-title[b-kgfpjlgvc6] {
    flex: 1;
    font-size: 0.85rem;
    color: #334155;
}

.item-duration[b-kgfpjlgvc6] {
    font-size: 0.7rem;
    color: #94A3B8;
    background: #F1F5F9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Completed info */
.session-completed-info[b-kgfpjlgvc6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #22C55E;
}

.session-completed-info .rzi[b-kgfpjlgvc6] {
    font-size: 14px;
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Pages/CheckHistory.razor.rz.scp.css */
.check-history-page[b-8iyeba49tb] {
    padding: 1rem;
    padding-bottom: 100px;
    max-width: 600px;
    margin: 0 auto;
}

/* Header */
.page-header[b-8iyeba49tb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.back-btn[b-8iyeba49tb] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.back-btn i[b-8iyeba49tb] {
    font-size: 1.25rem;
    color: var(--cl-text);
}

.header-content[b-8iyeba49tb] {
    flex: 1;
}

.page-title[b-8iyeba49tb] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-text);
}

.page-subtitle[b-8iyeba49tb] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--cl-text-secondary);
}

/* Filters */
.filters-bar[b-8iyeba49tb] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-group[b-8iyeba49tb] {
    display: flex;
}

/* Stats Summary */
.stats-summary[b-8iyeba49tb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat-card[b-8iyeba49tb] {
    background: white;
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-card .stat-value[b-8iyeba49tb] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-primary);
}

.stat-card .stat-label[b-8iyeba49tb] {
    font-size: 0.65rem;
    color: var(--cl-text-secondary);
    text-transform: uppercase;
}

/* Empty State */
.empty-state[b-8iyeba49tb] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cl-text-secondary);
}

.empty-state i[b-8iyeba49tb] {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

.empty-state p[b-8iyeba49tb] {
    margin: 0;
    font-size: 0.9rem;
}

/* Checks List */
.checks-list[b-8iyeba49tb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.check-card[b-8iyeba49tb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
}

.check-card:hover[b-8iyeba49tb] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.check-card.trained[b-8iyeba49tb] {
    border-left-color: #A855F7;
}

/* Date Column */
.check-date[b-8iyeba49tb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.check-date .day[b-8iyeba49tb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-text);
    line-height: 1;
}

.check-date .month[b-8iyeba49tb] {
    font-size: 0.65rem;
    color: var(--cl-text-secondary);
    text-transform: uppercase;
}

.check-date .weekday[b-8iyeba49tb] {
    font-size: 0.6rem;
    color: var(--cl-text-secondary);
    margin-top: 0.15rem;
}

/* Content Column */
.check-content[b-8iyeba49tb] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wellness-score[b-8iyeba49tb] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wellness-score .score[b-8iyeba49tb] {
    color: white;
    font-size: 1rem;
    font-weight: 700;
}

.check-metrics[b-8iyeba49tb] {
    display: flex;
    gap: 0.75rem;
}

.check-metrics .metric[b-8iyeba49tb] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--cl-text-secondary);
}

.check-metrics .metric i[b-8iyeba49tb] {
    font-size: 0.9rem;
}

.training-badge[b-8iyeba49tb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(168, 85, 247, 0.1);
    color: #7C3AED;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.training-badge i[b-8iyeba49tb] {
    font-size: 0.85rem;
}

/* Actions Column */
.check-actions[b-8iyeba49tb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.status-badge[b-8iyeba49tb] {
    font-size: 1.1rem;
}

.status-badge.compete[b-8iyeba49tb] {
    color: #F59E0B;
}

.status-badge.train[b-8iyeba49tb] {
    color: #22C55E;
}

.delete-btn[b-8iyeba49tb] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s;
}

.check-card:hover .delete-btn[b-8iyeba49tb] {
    opacity: 1;
}

.delete-btn i[b-8iyeba49tb] {
    font-size: 1rem;
    color: var(--cl-text-secondary);
}

.delete-btn:hover[b-8iyeba49tb] {
    background: rgba(239, 68, 68, 0.1);
}

.delete-btn:hover i[b-8iyeba49tb] {
    color: #EF4444;
}

.chevron[b-8iyeba49tb] {
    font-size: 1.25rem;
    color: #CBD5E1;
}

/* Empty State Card */
.empty-state-card[b-8iyeba49tb] {
    background: white;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.empty-state-card .empty-icon[b-8iyeba49tb] {
    font-size: 3rem;
    color: #CBD5E1;
    margin-bottom: 1rem;
}

.empty-state-card h2[b-8iyeba49tb] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--cl-text);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .stats-summary[b-8iyeba49tb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .check-metrics[b-8iyeba49tb] {
        display: none;
    }

    .check-content[b-8iyeba49tb] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Pages/FighterProfile.razor.rz.scp.css */
/* ===== FIGHTER PROFILE SHELL ===== */
.fp-wrap[b-2ppaifonrm] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: -1.5rem -1rem 0;
}

/* ===== DARK TOP BAR ===== */
.fp-topbar[b-2ppaifonrm] {
    background: #1a202c;
    padding: 2rem 1.25rem;
}

.fp-topbar-inner[b-2ppaifonrm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fp-id-row[b-2ppaifonrm] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.fp-avatar-wrap[b-2ppaifonrm] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
}

.fp-avatar-img[b-2ppaifonrm],
.fp-avatar-fallback[b-2ppaifonrm] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.15);
}

.fp-avatar-fallback[b-2ppaifonrm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4A5568;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

.fp-edit-badge[b-2ppaifonrm] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    border: 2px solid #1a202c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.fp-edit-badge .rzi[b-2ppaifonrm] {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}

.fp-edit-badge:hover[b-2ppaifonrm] {
    background: rgba(255,255,255,0.25);
}

.fp-edit-badge:hover .rzi[b-2ppaifonrm] {
    color: white;
}

.fp-id-text[b-2ppaifonrm] {
    min-width: 0;
}

.fp-id-text h1[b-2ppaifonrm] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-sub-lines[b-2ppaifonrm] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.25rem;
}

.fp-sub-line[b-2ppaifonrm] {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fp-open-badge[b-2ppaifonrm] {
    color: #FBBF24;
}

.fp-status-badge[b-2ppaifonrm] {
    display: inline-flex;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.fp-status-badge.pro[b-2ppaifonrm] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ADE80;
}

.fp-status-badge.am[b-2ppaifonrm] {
    background: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
}

/* ===== BACK BAR ===== */
.fp-backbar[b-2ppaifonrm] {
    background: white;
    border-bottom: 1px solid #E2E8F0;
    padding: 0.75rem 1.25rem;
}

.fp-back-link[b-2ppaifonrm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3B82F6;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fp-back-link .rzi[b-2ppaifonrm] {
    font-size: 20px;
}

/* ===== BODY ===== */
.fp-body[b-2ppaifonrm] {
    flex: 1;
    padding: 1rem 1.25rem 5rem;
    background: #f7f8fa;
}

/* ===== SECTIONS ===== */
.fp-section[b-2ppaifonrm] {
    margin-bottom: 1.25rem;
}

.fp-section-label[b-2ppaifonrm] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

/* ===== STATS ROW ===== */
.fp-stats-row[b-2ppaifonrm] {
    display: flex;
    gap: 0.5rem;
}

.fp-stat[b-2ppaifonrm] {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
}

.fp-stat-value[b-2ppaifonrm] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

.fp-stat-label[b-2ppaifonrm] {
    font-size: 0.625rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* ===== GAMIFICATION ROW ===== */
.fp-gam-row[b-2ppaifonrm] {
    display: flex;
    gap: 0.5rem;
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
}

.fp-gam[b-2ppaifonrm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.fp-gam-ico[b-2ppaifonrm] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-gam-ico .rzi[b-2ppaifonrm] {
    font-size: 18px;
}

.fp-gam-ico.level-bg[b-2ppaifonrm] { background: #FFFBEB; color: #F59E0B; }
.fp-gam-ico.xp-bg[b-2ppaifonrm] { background: #EBF5FF; color: #3B82F6; }
.fp-gam-ico.streak-bg[b-2ppaifonrm] { background: #FEF2F2; color: #EF4444; }
.fp-gam-ico.badges-bg[b-2ppaifonrm] { background: #F3F0FF; color: #8B5CF6; }

.fp-gam-val[b-2ppaifonrm] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1a202c;
}

.fp-gam-lbl[b-2ppaifonrm] {
    font-size: 0.625rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===== HUB CARDS ===== */
.fp-hub-cards[b-2ppaifonrm] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.fp-hub-card[b-2ppaifonrm] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.fp-hub-card:active[b-2ppaifonrm] {
    background: #F8FAFC;
}

.fp-hub-ico[b-2ppaifonrm] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-hub-ico .rzi[b-2ppaifonrm] {
    font-size: 22px;
}

.fp-ico-blue[b-2ppaifonrm]  { background: #EBF5FF; }
.fp-ico-blue .rzi[b-2ppaifonrm] { color: #3B82F6; }
.fp-ico-red[b-2ppaifonrm]   { background: #FEF2F2; }
.fp-ico-red .rzi[b-2ppaifonrm] { color: #EF4444; }
.fp-ico-green[b-2ppaifonrm] { background: #ECFDF5; }
.fp-ico-green .rzi[b-2ppaifonrm] { color: #10B981; }
.fp-ico-amber[b-2ppaifonrm] { background: #FFFBEB; }
.fp-ico-amber .rzi[b-2ppaifonrm] { color: #F59E0B; }
.fp-ico-purple[b-2ppaifonrm] { background: #F3F0FF; }
.fp-ico-purple .rzi[b-2ppaifonrm] { color: #8B5CF6; }
.fp-ico-teal[b-2ppaifonrm]  { background: #F0FDFA; }
.fp-ico-teal .rzi[b-2ppaifonrm] { color: #14B8A6; }
.fp-ico-gray[b-2ppaifonrm]  { background: #F1F5F9; }
.fp-ico-gray .rzi[b-2ppaifonrm] { color: #64748B; }

.fp-hub-text[b-2ppaifonrm] {
    flex: 1;
    min-width: 0;
}

.fp-hub-title[b-2ppaifonrm] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a202c;
}

.fp-hub-desc[b-2ppaifonrm] {
    font-size: 0.8125rem;
    color: #94A3B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-hub-count[b-2ppaifonrm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #EBF5FF;
    color: #3B82F6;
    font-size: 0.75rem;
    font-weight: 600;
}

.fp-hub-chev[b-2ppaifonrm] {
    font-size: 20px;
    color: #CBD5E0;
    flex-shrink: 0;
}

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
    .fp-topbar[b-2ppaifonrm] {
        padding: 1.5rem 2rem;
    }

    .fp-avatar-img[b-2ppaifonrm],
    .fp-avatar-fallback[b-2ppaifonrm],
    .fp-avatar-wrap[b-2ppaifonrm] {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .fp-id-text h1[b-2ppaifonrm] {
        font-size: 1.375rem;
    }

    .fp-backbar[b-2ppaifonrm] {
        padding: 0.75rem 2rem;
    }

    .fp-body[b-2ppaifonrm] {
        padding: 1.5rem 2rem 2rem;
    }

    .fp-hub-cards[b-2ppaifonrm] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}
/* /Components/Pages/CoachingFeatures/ClientFeature/Pages/Readiness.razor.rz.scp.css */
.readiness-page[b-135kuwf0zo] {
    max-width: 1200px;
    margin: 0 auto;
   
}

/* ===== HEADER ===== */
.page-header[b-135kuwf0zo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
}

.page-title[b-135kuwf0zo] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-text);
}

.page-subtitle[b-135kuwf0zo] {
    margin: 0.125rem 0 0 0;
    font-size: 0.8rem;
    color: var(--cl-text-secondary);
}

.header-actions[b-135kuwf0zo] {
    display: flex;
    gap: 0.5rem;
}

/* ===== SCORE HERO ===== */
.score-hero[b-135kuwf0zo] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 1rem;
}

.score-ring[b-135kuwf0zo] {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.score-svg[b-135kuwf0zo] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-bg[b-135kuwf0zo] {
    fill: none;
    stroke: #E5E7EB;
    stroke-width: 8;
}

.score-fill[b-135kuwf0zo] {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.score-fill.status-excellent[b-135kuwf0zo] { stroke: #22C55E; }
.score-fill.status-good[b-135kuwf0zo] { stroke: #3B82F6; }
.score-fill.status-moderate[b-135kuwf0zo] { stroke: #F59E0B; }
.score-fill.status-low[b-135kuwf0zo] { stroke: #EF4444; }
.score-fill.status-injured[b-135kuwf0zo] { stroke: #EF4444; }

.score-center[b-135kuwf0zo] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-number[b-135kuwf0zo] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--cl-text);
    line-height: 1;
}

.score-max[b-135kuwf0zo] {
    font-size: 0.7rem;
    color: var(--cl-text-secondary);
}

.score-info[b-135kuwf0zo] {
    flex: 1;
    min-width: 0;
}

.status-badge[b-135kuwf0zo] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.status-badge.status-excellent[b-135kuwf0zo] { background: rgba(34,197,94,0.15); color: #16A34A; }
.status-badge.status-good[b-135kuwf0zo] { background: rgba(59,130,246,0.15); color: #2563EB; }
.status-badge.status-moderate[b-135kuwf0zo] { background: rgba(245,158,11,0.15); color: #D97706; }
.status-badge.status-low[b-135kuwf0zo] { background: rgba(239,68,68,0.15); color: #DC2626; }
.status-badge.status-injured[b-135kuwf0zo] { background: rgba(239,68,68,0.2); color: #DC2626; border: 1px solid #EF4444; }

.quick-stats[b-135kuwf0zo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stat-chip[b-135kuwf0zo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #F1F5F9;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--cl-text-secondary);
}

.stat-chip i[b-135kuwf0zo] {
    font-size: 0.85rem;
}

.stat-chip.active[b-135kuwf0zo] {
    background: rgba(34,197,94,0.1);
    color: #16A34A;
}

.stat-chip.inactive[b-135kuwf0zo] {
    background: rgba(239,68,68,0.1);
    color: #DC2626;
}

/* ===== BREAKDOWN CARD ===== */
.breakdown-card[b-135kuwf0zo] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 1rem;
}

.breakdown-card.injured[b-135kuwf0zo] {
    border: 2px solid #EF4444;
}

.injury-warning-banner[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
    font-size: 0.85rem;
    font-weight: 500;
}

.injury-warning-banner i[b-135kuwf0zo] {
    font-size: 1.25rem;
}

.breakdown-bars.disabled[b-135kuwf0zo] {
    opacity: 0.5;
    pointer-events: none;
}

.breakdown-header[b-135kuwf0zo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E5E7EB;
}

.breakdown-title[b-135kuwf0zo] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cl-text);
}

.toggle-icon[b-135kuwf0zo] {
    color: var(--cl-text-secondary);
    font-size: 1.25rem;
}

.breakdown-bars[b-135kuwf0zo] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bar-row[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bar-info[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 85px;
    font-size: 0.8rem;
    color: var(--cl-text-secondary);
}

.bar-info i[b-135kuwf0zo] {
    font-size: 1rem;
}

.icon-training[b-135kuwf0zo] { color: #764BA2; }
.icon-weight[b-135kuwf0zo] { color: #3B82F6; }
.icon-wellness[b-135kuwf0zo] { color: #22C55E; }
.icon-injury[b-135kuwf0zo] { color: #22C55E; }
.icon-injury.warning[b-135kuwf0zo] { color: #F59E0B; }

.bar-track[b-135kuwf0zo] {
    flex: 1;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill[b-135kuwf0zo] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.bar-fill.training[b-135kuwf0zo] { background: linear-gradient(90deg, #667EEA, #764BA2); }
.bar-fill.weight[b-135kuwf0zo] { background: linear-gradient(90deg, #3B82F6, #1D4ED8); }
.bar-fill.wellness[b-135kuwf0zo] { background: linear-gradient(90deg, #22C55E, #16A34A); }
.bar-fill.injury[b-135kuwf0zo] { background: linear-gradient(90deg, #22C55E, #16A34A); }
.bar-fill.injury.has-injury[b-135kuwf0zo] { background: linear-gradient(90deg, #F59E0B, #D97706); }

.bar-score[b-135kuwf0zo] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cl-text);
    min-width: 40px;
    text-align: right;
}

/* Breakdown Details (expanded) */
.breakdown-details[b-135kuwf0zo] {
    padding: 1rem;
    border-top: 1px solid #E5E7EB;
    animation: slideDown-b-135kuwf0zo 0.2s ease;
}

@keyframes slideDown-b-135kuwf0zo {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.detail-grid[b-135kuwf0zo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-item[b-135kuwf0zo] {
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
    background: #F8FAFC;
    border-radius: 10px;
    border-left: 3px solid #E5E7EB;
}

.detail-item .detail-header[b-135kuwf0zo] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.detail-item .detail-header i[b-135kuwf0zo] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.detail-item .detail-header strong[b-135kuwf0zo] {
    font-weight: 600;
}

.detail-header.training[b-135kuwf0zo] { color: #764BA2; }
.detail-header.weight[b-135kuwf0zo] { color: #3B82F6; }
.detail-header.wellness[b-135kuwf0zo] { color: #22C55E; }
.detail-header.injury[b-135kuwf0zo] { color: #22C55E; }

.detail-item:has(.detail-header.training)[b-135kuwf0zo] { border-left-color: #764BA2; }
.detail-item:has(.detail-header.weight)[b-135kuwf0zo] { border-left-color: #3B82F6; }
.detail-item:has(.detail-header.wellness)[b-135kuwf0zo] { border-left-color: #22C55E; }
.detail-item:has(.detail-header.injury)[b-135kuwf0zo] { border-left-color: #22C55E; }

.detail-item p[b-135kuwf0zo] {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--cl-text-secondary);
    line-height: 1.5;
    flex-shrink: 0;
}

.detail-item .training-stats[b-135kuwf0zo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(118, 75, 162, 0.1);
    border-radius: 8px;
}

.detail-item .training-stats .stat[b-135kuwf0zo] {
    font-size: 0.8rem;
    color: #764BA2;
}

.detail-item .training-stats .stat strong[b-135kuwf0zo] {
    font-weight: 700;
}

.detail-item > .tip[b-135kuwf0zo] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto;
    padding: 0.5rem 0.75rem;
    background: rgba(34,197,94,0.1);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #16A34A;
    line-height: 1.4;
    flex-shrink: 0;
}

.detail-item .tip.warning[b-135kuwf0zo] {
    background: rgba(245,158,11,0.1);
    color: #D97706;
}

.detail-item .tip.success[b-135kuwf0zo] {
    background: rgba(34,197,94,0.1);
    color: #16A34A;
}

.detail-item .tip i[b-135kuwf0zo] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.score-legend[b-135kuwf0zo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #E5E7EB;
}

.legend-item[b-135kuwf0zo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--cl-text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: white;
    border: 1px solid #E5E7EB;
}

.legend-item span[b-135kuwf0zo] {
    font-weight: 700;
}

.legend-item.excellent span[b-135kuwf0zo] { color: #16A34A; }
.legend-item.good span[b-135kuwf0zo] { color: #2563EB; }
.legend-item.moderate span[b-135kuwf0zo] { color: #D97706; }
.legend-item.low span[b-135kuwf0zo] { color: #DC2626; }
.legend-item.injured[b-135kuwf0zo] { background: #FEE2E2; border-color: #EF4444; }
.legend-item.injured span[b-135kuwf0zo] { color: #DC2626; }

/* ===== ACTIONS SECTION ===== */
.actions-section[b-135kuwf0zo] {
    margin-bottom: 1rem;
}

.section-label[b-135kuwf0zo] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cl-text-secondary);
    margin: 0 0 0.5rem 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-cards[b-135kuwf0zo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-card[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 3px solid #3B82F6;
}

.action-card:active[b-135kuwf0zo] {
    transform: scale(0.98);
}

.action-card.priority-1[b-135kuwf0zo] {
    border-left-color: #EF4444;
    background: linear-gradient(to right, rgba(239,68,68,0.03), white);
}

.action-card.priority-2[b-135kuwf0zo] {
    border-left-color: #F59E0B;
}

.action-card.priority-3[b-135kuwf0zo] {
    border-left-color: #22C55E;
}

.action-icon[b-135kuwf0zo] {
    width: 40px;
    height: 40px;
    background: #F1F5F9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-icon i[b-135kuwf0zo] {
    font-size: 1.25rem;
    color: #64748B;
}

.action-card.priority-1 .action-icon[b-135kuwf0zo] {
    background: rgba(239,68,68,0.1);
}

.action-card.priority-1 .action-icon i[b-135kuwf0zo] {
    color: #EF4444;
}

.action-content[b-135kuwf0zo] {
    flex: 1;
    min-width: 0;
}

.action-content strong[b-135kuwf0zo] {
    display: block;
    font-size: 0.9rem;
    color: var(--cl-text);
    margin-bottom: 0.15rem;
}

.action-impact[b-135kuwf0zo] {
    font-size: 0.75rem;
    color: #22C55E;
    font-weight: 500;
}

.action-arrow[b-135kuwf0zo] {
    color: var(--cl-text-secondary);
    font-size: 1.25rem;
}

/* ===== TABBED DATA SECTIONS ===== */
.data-tabs[b-135kuwf0zo] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tab-nav[b-135kuwf0zo] {
    display: flex;
    border-bottom: 1px solid #E5E7EB;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tab-nav[b-135kuwf0zo]::-webkit-scrollbar {
    display: none;
}

.tab-btn[b-135kuwf0zo] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.75rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--cl-text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.tab-btn i[b-135kuwf0zo] {
    font-size: 1.25rem;
}

.tab-btn.active[b-135kuwf0zo] {
    color: var(--cl-primary);
    border-bottom-color: var(--cl-primary);
}

.tab-btn.warning i[b-135kuwf0zo] {
    color: #F59E0B;
}

.tab-btn.warning.active[b-135kuwf0zo] {
    border-bottom-color: #F59E0B;
}

.tab-badge[b-135kuwf0zo] {
    position: absolute;
    top: 0.4rem;
    right: calc(50% - 1rem);
    background: #EF4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.tab-content[b-135kuwf0zo] {
    min-height: 200px;
}

.tab-panel[b-135kuwf0zo] {
    padding: 1rem;
}

.panel-header[b-135kuwf0zo] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.chart-unit[b-135kuwf0zo] {
    text-align: center;
    font-size: 0.7rem;
    color: var(--cl-text-secondary);
    margin-top: 0.25rem;
}

.empty-tab[b-135kuwf0zo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cl-text-secondary);
}

.empty-tab i[b-135kuwf0zo] {
    font-size: 2.5rem;
    color: #CBD5E1;
    margin-bottom: 0.5rem;
}

.empty-tab p[b-135kuwf0zo] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
}

/* Check-ins Panel */
.checks-panel[b-135kuwf0zo] {
    padding: 0;
}

.checks-list[b-135kuwf0zo] {
    display: flex;
    flex-direction: column;
}

.check-row[b-135kuwf0zo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F1F5F9;
}

.check-row:last-child[b-135kuwf0zo] {
    border-bottom: none;
}

.check-date-col[b-135kuwf0zo] {
    text-align: center;
    min-width: 36px;
    flex-shrink: 0;
}

.check-date-col .day[b-135kuwf0zo] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cl-text);
    line-height: 1;
}

.check-date-col .month[b-135kuwf0zo] {
    font-size: 0.65rem;
    color: var(--cl-text-secondary);
    text-transform: uppercase;
}

.check-main-col[b-135kuwf0zo] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.check-scores-row[b-135kuwf0zo] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mini-score[b-135kuwf0zo] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mini-score .label[b-135kuwf0zo] {
    font-size: 0.6rem;
    color: var(--cl-text-secondary);
    text-transform: uppercase;
}

.mini-score .value[b-135kuwf0zo] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cl-text);
}

.check-training-row[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #764BA2;
    background: rgba(118, 75, 162, 0.08);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    width: fit-content;
}

.check-training-row i[b-135kuwf0zo] {
    font-size: 0.9rem;
}

.check-training-row .training-types[b-135kuwf0zo] {
    font-style: italic;
    opacity: 0.8;
}

.check-actions-col[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.status-icon[b-135kuwf0zo] {
    font-size: 1.1rem;
}

.status-icon.compete[b-135kuwf0zo] {
    color: #F59E0B;
}

.status-icon.train[b-135kuwf0zo] {
    color: #22C55E;
}

.action-btn[b-135kuwf0zo] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.action-btn i[b-135kuwf0zo] {
    font-size: 1rem;
    color: var(--cl-text-secondary);
}

.action-btn.view:hover[b-135kuwf0zo] {
    background: rgba(59, 130, 246, 0.1);
}

.action-btn.view:hover i[b-135kuwf0zo] {
    color: #3B82F6;
}

.action-btn.delete:hover[b-135kuwf0zo] {
    background: rgba(239, 68, 68, 0.1);
}

.action-btn.delete:hover i[b-135kuwf0zo] {
    color: #EF4444;
}

.see-all-link[b-135kuwf0zo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 0.875rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cl-primary);
    border-top: 1px solid #F1F5F9;
    cursor: pointer;
    transition: background 0.15s;
}

.see-all-link:hover[b-135kuwf0zo] {
    background: rgba(112, 175, 251, 0.08);
}

.see-all-link i[b-135kuwf0zo] {
    font-size: 1rem;
}

/* ===== RESPONSIVE - Larger screens ===== */
@media (min-width: 640px) {
    .readiness-page[b-135kuwf0zo] {
        max-width: 700px;
        padding: 1rem 1.5rem 2rem;
    }
    
    .score-hero[b-135kuwf0zo] {
        padding: 2rem;
        gap: 2rem;
    }
    
    .score-ring[b-135kuwf0zo] {
        width: 130px;
        height: 130px;
    }
    
    .score-number[b-135kuwf0zo] {
        font-size: 2.25rem;
    }
    
    .detail-grid[b-135kuwf0zo] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .action-cards[b-135kuwf0zo] {
        flex-direction: row;
    }
    
    .action-card[b-135kuwf0zo] {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .readiness-page[b-135kuwf0zo] {
        max-width: 800px;
    }
}
/* /Components/Pages/CommunityFeature/Pages/CommunityFeed.razor.rz.scp.css */




.community-page[b-tu7kx4aly8] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    /* Prevent horizontal overflow from negative margins inside */
    overflow-x: hidden;
}

/* Hero Header */
.community-hero[b-tu7kx4aly8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    padding: 20px 16px;
    /* Use calc to extend full width without causing overflow */
    margin: -0.75rem -0.75rem 0 -0.75rem;
    width: calc(100% + 1.5rem);
    position: relative;
    overflow: hidden;
}

    .community-hero[b-tu7kx4aly8]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }

    .community-hero[b-tu7kx4aly8]::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: 10%;
        width: 120px;
        height: 120px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
    }

.hero-content[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 1rem;
    z-index: 1;
}

.hero-greeting[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wave-emoji[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    animation: pulse-glow-b-tu7kx4aly8 2s ease-in-out infinite;
}

    .wave-emoji :deep(.rzi)[b-tu7kx4aly8] {
        font-size: 1.75rem;
        color: white;
    }

@keyframes pulse-glow-b-tu7kx4aly8 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 4px rgba(255, 255, 255, 0.15);
    }
}

.greeting-text[b-tu7kx4aly8] {
    display: flex;
    flex-direction: column;
}

.greeting-label[b-tu7kx4aly8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.greeting-subtitle[b-tu7kx4aly8] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}


.hero-create-btn[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: white;
    color: #764ba2;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s;
}

    .hero-create-btn:hover[b-tu7kx4aly8] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }

    .hero-create-btn:active[b-tu7kx4aly8] {
        transform: scale(0.95);
    }

/* Quick Action Menu */
.quick-menu-overlay[b-tu7kx4aly8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn-b-tu7kx4aly8 0.15s ease-out;
}

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

.quick-menu[b-tu7kx4aly8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--rz-base-background-color);
    border-radius: 20px;
    z-index: 1001;
    min-width: 300px;
    max-width: 90vw;
    overflow: hidden;
    animation: menuPopIn-b-tu7kx4aly8 0.25s ease-out;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 8px;
}

@keyframes menuPopIn-b-tu7kx4aly8 {
    from { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.9);
    }
    to { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);
    }
}

.quick-menu-item[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px;
    border: none;
    background: transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.quick-menu-item:hover[b-tu7kx4aly8] {
    background: var(--rz-base-100);
}

.quick-menu-item:active[b-tu7kx4aly8] {
    transform: scale(0.98);
}

.quick-menu-icon[b-tu7kx4aly8] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-menu-icon.post-icon[b-tu7kx4aly8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.quick-menu-icon.challenge-icon[b-tu7kx4aly8] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.quick-menu-icon[b-tu7kx4aly8]  .rzi {
    font-size: 1.5rem;
}

.quick-menu-text[b-tu7kx4aly8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-menu-title[b-tu7kx4aly8] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--rz-text-color);
}

.quick-menu-desc[b-tu7kx4aly8] {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
}

/* Stories Section */
.stories-section[b-tu7kx4aly8] {
    padding: 16px;
    background: var(--rz-base-background-color);
}

/* Stories Row */
.stories-row[b-tu7kx4aly8] {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .stories-row[b-tu7kx4aly8]::-webkit-scrollbar {
        display: none;
    }

.story-item[b-tu7kx4aly8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 70px;
    transition: transform 0.2s;
}

    .story-item:active[b-tu7kx4aly8] {
        transform: scale(0.95);
    }

.story-avatar-wrapper[b-tu7kx4aly8] {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--rz-base-300);
    transition: all 0.2s;
    background: var(--rz-base-200);
    flex-shrink: 0;
}

    .story-avatar-wrapper.has-story[b-tu7kx4aly8] {
        border: 3px solid transparent;
        background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #667eea, #764ba2, #f093fb) border-box;
    }

.story-item.has-new .story-avatar-wrapper[b-tu7kx4aly8] {
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #667eea, #764ba2, #f093fb) border-box;
}

.story-avatar-img[b-tu7kx4aly8],
.story-avatar-wrapper[b-tu7kx4aly8]  img {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.story-avatar-initials[b-tu7kx4aly8],
.story-avatar-wrapper[b-tu7kx4aly8]  .story-avatar-initials {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Create Story Button */
.create-story .create-story-avatar[b-tu7kx4aly8] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
}

.create-plus[b-tu7kx4aly8] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #764ba2;
}

    .create-plus :deep(.rzi)[b-tu7kx4aly8] {
        font-size: 1.1rem;
    }

.story-name[b-tu7kx4aly8] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.story-item:hover .story-avatar-wrapper[b-tu7kx4aly8],
.story-item:hover .create-story-avatar[b-tu7kx4aly8] {
    transform: scale(1.05);
}

/* Feed Tabs Container */
.feed-tabs-container[b-tu7kx4aly8] {
    background: var(--rz-base-background-color);
    padding: 0 16px;
}

/* Feed Tabs */
.feed-tabs[b-tu7kx4aly8] {
    display: flex;
    gap: 8px;
    padding: 8px 0;
}

.tab-btn[b-tu7kx4aly8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: var(--rz-base-100);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.2s;
}

    .tab-btn :deep(.rzi)[b-tu7kx4aly8] {
        font-size: 1.1rem;
    }

    .tab-btn:hover[b-tu7kx4aly8] {
        background: var(--rz-base-200);
    }

    .tab-btn.active[b-tu7kx4aly8] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

/* Filter Section */
.filter-section[b-tu7kx4aly8] {
    padding: 12px 16px;
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.filter-chips[b-tu7kx4aly8] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

    .filter-chips[b-tu7kx4aly8]::-webkit-scrollbar {
        display: none;
    }

.chip[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

    .chip :deep(.rzi)[b-tu7kx4aly8] {
        font-size: 0.95rem;
    }

    .chip:hover[b-tu7kx4aly8] {
        border-color: var(--rz-primary);
        color: var(--rz-primary);
    }

    .chip.active[b-tu7kx4aly8] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
        color: white;
    }

.create-btn[b-tu7kx4aly8] {
    display: none; /* Hidden - using hero button instead */
}

.desktop-only[b-tu7kx4aly8] {
    display: none;
}

/* Page Header - Legacy (hidden) */
.page-header[b-tu7kx4aly8] {
    display: none;
}

/* Feed Container */
.feed-container[b-tu7kx4aly8] {
    padding: 0px;
}

/* Card Grid / Feed Layout */
.card-grid[b-tu7kx4aly8] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 470px;
    margin: 0 auto;
}

/* Skeleton Loading */
.skeleton-card[b-tu7kx4aly8] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.skeleton-thumb[b-tu7kx4aly8] {
    aspect-ratio: 1;
    background: var(--rz-base-200);
    animation: pulse-b-tu7kx4aly8 1.5s ease-in-out infinite;
}

.skeleton-meta[b-tu7kx4aly8] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}

.skeleton-avatar[b-tu7kx4aly8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rz-base-200);
    animation: pulse-b-tu7kx4aly8 1.5s ease-in-out infinite;
}

.skeleton-text[b-tu7kx4aly8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line[b-tu7kx4aly8] {
    height: 12px;
    border-radius: 6px;
    background: var(--rz-base-200);
    animation: pulse-b-tu7kx4aly8 1.5s ease-in-out infinite;
}

    .skeleton-line.short[b-tu7kx4aly8] {
        width: 60%;
    }

@keyframes pulse-b-tu7kx4aly8 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Empty State */
.empty-state[b-tu7kx4aly8] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-tu7kx4aly8] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--rz-base-200);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

    .empty-icon :deep(.rzi)[b-tu7kx4aly8] {
        font-size: 2.5rem;
        color: var(--rz-text-secondary-color);
    }

.empty-state h3[b-tu7kx4aly8] {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

.empty-state p[b-tu7kx4aly8] {
    margin: 0 0 20px;
    color: var(--rz-text-secondary-color);
}

.primary-btn[b-tu7kx4aly8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 24px;
    border: none;
    background: var(--rz-primary);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

    .primary-btn:hover[b-tu7kx4aly8] {
        opacity: 0.9;
    }

/* Load More Sentinel (Infinite Scroll) */
.load-more-sentinel[b-tu7kx4aly8] {
    display: flex;
    justify-content: center;
    padding: 24px;
    min-height: 60px;
}

.loading-indicator[b-tu7kx4aly8] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rz-text-secondary-color);
}

.spinner[b-tu7kx4aly8] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rz-base-300);
    border-top-color: var(--rz-primary);
    border-radius: 50%;
    animation: spin-b-tu7kx4aly8 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
    .community-page[b-tu7kx4aly8] {
        padding: 0;
    }

    .desktop-only[b-tu7kx4aly8] {
        display: none;
    }

    .page-header[b-tu7kx4aly8] {
        padding: 0 12px;
    }

    .stories-row[b-tu7kx4aly8] {
        padding-left: 12px;
    }

    .feed-tabs[b-tu7kx4aly8] {
        padding: 0;
    }
}

@media (min-width: 768px) {
    .community-page[b-tu7kx4aly8] {
        padding: 24px;
    }

    .card-grid[b-tu7kx4aly8] {
        max-width: 470px;
    }
}

@media (min-width: 1200px) {
   .card-grid[b-tu7kx4aly8] {
        max-width: 600px;
    }
}
/* /Components/Pages/DashboardFeatures/Components/CampFighterProgress.razor.rz.scp.css */
/* ============================================
   CAMP FIGHTER PROGRESS STYLES
   Fighter cards with weight cut progress,
   session status, and camp notes
   ============================================ */

.camp-fighter-progress[b-odody8oeke] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-width: 0; /* Allow shrinking in grid */
    overflow: hidden;
    box-sizing: border-box;
}

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

.section-header[b-odody8oeke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .section-header h4[b-odody8oeke] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #1E293B;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }

        .section-header h4 .rzi[b-odody8oeke] {
            color: #F59E0B;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

.header-filters[b-odody8oeke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.org-selector[b-odody8oeke],
.camp-selector[b-odody8oeke] {
    min-width: 120px;
    max-width: 160px;
}

.org-name-badge[b-odody8oeke] {
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, #70AFFB 0%, #4A90D9 100%);
    color: white;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.camp-name-badge[b-odody8oeke] {
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* ========================================
   LOADING & EMPTY STATES
   ======================================== */

.loading-state[b-odody8oeke],
.empty-state[b-odody8oeke] {
    text-align: center;
    padding: 2rem 1rem;
}

.loading-state p[b-odody8oeke],
.empty-state p[b-odody8oeke] {
    color: #64748B;
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

.empty-state .empty-icon[b-odody8oeke] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .empty-state .empty-icon .rzi[b-odody8oeke] {
        font-size: 28px;
        color: #D97706;
    }

.empty-state h5[b-odody8oeke] {
    margin: 0 0 0.35rem;
    color: #1E293B;
    font-size: 1rem;
    font-weight: 600;
}

/* ========================================
   FIGHTER PROGRESS LIST
   ======================================== */

.fighter-progress-list[b-odody8oeke] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ========================================
   FIGHTER PROGRESS CARD
   ======================================== */

.fighter-progress-card[b-odody8oeke] {
    background: #F8FAFC;
    border-radius: 14px;
    padding: 1rem;
    border: 2px solid transparent;
    transition: all 0.2s;
    min-width: 0;
    overflow: hidden;
}

    .fighter-progress-card:hover[b-odody8oeke] {
        background: #F1F5F9;
        border-color: #E2E8F0;
    }

    /* Status-based border colors */
    .fighter-progress-card.on-target[b-odody8oeke] {
        border-left: 4px solid #22C55E;
    }

    .fighter-progress-card.close[b-odody8oeke] {
        border-left: 4px solid #84CC16;
    }

    .fighter-progress-card.moderate[b-odody8oeke] {
        border-left: 4px solid #F59E0B;
    }

    .fighter-progress-card.significant[b-odody8oeke] {
        border-left: 4px solid #EF4444;
    }

    .fighter-progress-card.no-data[b-odody8oeke] {
        border-left: 4px solid #94A3B8;
    }

/* ---- Fighter Header ---- */
.fighter-header[b-odody8oeke] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-width: 0;
}

.fighter-avatar[b-odody8oeke] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.fighter-info[b-odody8oeke] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.fighter-name[b-odody8oeke] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fighter-role[b-odody8oeke] {
    font-size: 0.75rem;
    color: #64748B;
}

.camp-days-badge[b-odody8oeke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    border-radius: 10px;
    color: white;
    flex-shrink: 0;
    min-width: 50px;
}

.days-value[b-odody8oeke] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.days-label[b-odody8oeke] {
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.fight-date[b-odody8oeke] {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

/* ---- Weight Section ---- */
.weight-section[b-odody8oeke] {
    background: white;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

.weight-header[b-odody8oeke] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.weight-label[b-odody8oeke] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Base weight-status styles (used in header and inside metric) */
.weight-status[b-odody8oeke] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
}

    .weight-status.on-target[b-odody8oeke] {
        background: #D1FAE5;
        color: #059669;
    }

    .weight-status.close[b-odody8oeke] {
        background: #ECFCCB;
        color: #65A30D;
    }

    .weight-status.moderate[b-odody8oeke] {
        background: #FEF3C7;
        color: #D97706;
    }

    .weight-status.significant[b-odody8oeke] {
        background: #FEE2E2;
        color: #DC2626;
    }

    .weight-status.no-data[b-odody8oeke] {
        background: #F1F5F9;
        color: #64748B;
    }

.weight-metrics[b-odody8oeke] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.weight-metric[b-odody8oeke] {
    text-align: center;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .weight-metric .metric-value[b-odody8oeke] {
        display: block;
        font-size: 0.85rem;
        font-weight: 700;
        color: #1E293B;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .weight-metric .metric-label[b-odody8oeke] {
        display: block;
        font-size: 0.6rem;
        color: #94A3B8;
        text-transform: uppercase;
    }

    /* Status badge positioned above the % value */
    .weight-metric .weight-status[b-odody8oeke] {
        font-size: 0.65rem;
        font-weight: 600;
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        white-space: nowrap;
        margin-bottom: 0.25rem;
        order: -1; /* Move to top of flex column */
    }

    .weight-metric.target .metric-value[b-odody8oeke] {
        color: #22C55E;
    }

    /* Weight percentage status colors:
       safe (0-7%): green
       warning (7-15%): yellow/orange  
       critical (15%+): red */
    .weight-metric.diff.safe .metric-value[b-odody8oeke] {
        color: #22C55E;
    }

    .weight-metric.diff.warning .metric-value[b-odody8oeke] {
        color: #F59E0B;
    }

    .weight-metric.diff.critical .metric-value[b-odody8oeke] {
        color: #EF4444;
    }

.weight-arrow[b-odody8oeke] {
    color: #CBD5E1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .weight-arrow .rzi[b-odody8oeke] {
        font-size: 14px;
    }

/* Weight Progress Bar */
.weight-progress-bar[b-odody8oeke] {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-odody8oeke] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

    .progress-fill.excellent[b-odody8oeke] {
        background: linear-gradient(90deg, #22C55E, #4ADE80);
    }

    .progress-fill.good[b-odody8oeke] {
        background: linear-gradient(90deg, #84CC16, #A3E635);
    }

    .progress-fill.moderate[b-odody8oeke] {
        background: linear-gradient(90deg, #F59E0B, #FBBF24);
    }

    .progress-fill.needs-work[b-odody8oeke] {
        background: linear-gradient(90deg, #EF4444, #F87171);
    }

/* ---- Session Section ---- */
.session-section[b-odody8oeke] {
    margin-bottom: 0.5rem;
    min-width: 0;
}

.session-header[b-odody8oeke] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 0.35rem;
}

.session-info[b-odody8oeke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 8px;
    min-width: 0;
}

    .session-info.completed[b-odody8oeke] {
        background: #F0FDF4;
    }

    .session-info.missed[b-odody8oeke] {
        background: #FEF2F2;
    }

    .session-info.pending[b-odody8oeke] {
        background: #FFFBEB;
    }

.session-status-icon[b-odody8oeke] {
    flex-shrink: 0;
}

    .session-status-icon .rzi[b-odody8oeke] {
        font-size: 20px;
    }

.session-details[b-odody8oeke] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.session-title[b-odody8oeke] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-date[b-odody8oeke] {
    font-size: 0.7rem;
    color: #64748B;
}

.effort-badge[b-odody8oeke] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.2rem 0.4rem;
    background: #F59E0B;
    color: white;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.no-session[b-odody8oeke] {
    font-size: 0.8rem;
    color: #94A3B8;
    font-style: italic;
    padding: 0.5rem;
}

/* ---- Note Section ---- */
.note-section[b-odody8oeke] {
    background: #FFFBEB;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    border-left: 3px solid #F59E0B;
    min-width: 0;
    overflow: hidden;
}

.note-header[b-odody8oeke] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

    .note-header .rzi[b-odody8oeke] {
        color: #D97706;
        flex-shrink: 0;
    }

.note-date[b-odody8oeke] {
    font-size: 0.65rem;
    color: #92400E;
    font-weight: 500;
}

.note-content[b-odody8oeke] {
    font-size: 0.8rem;
    color: #78350F;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .camp-fighter-progress[b-odody8oeke] {
        padding: 1rem;
    }

    .weight-metric .metric-value[b-odody8oeke] {
        font-size: 0.8rem;
    }
    
    .org-selector[b-odody8oeke],
    .camp-selector[b-odody8oeke] {
        min-width: 100px;
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    .camp-fighter-progress[b-odody8oeke] {
        padding: 1rem;
    }

    .section-header[b-odody8oeke] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-filters[b-odody8oeke] {
        width: 100%;
    }

    .org-selector[b-odody8oeke],
    .camp-selector[b-odody8oeke] {
        flex: 1;
        max-width: 100%;
    }

    .weight-metrics[b-odody8oeke] {
        flex-wrap: wrap;
    }

    .weight-arrow[b-odody8oeke] {
        display: none;
    }

    .weight-metric[b-odody8oeke] {
        flex: 0 0 calc(33% - 0.25rem);
    }

        .weight-metric .metric-value[b-odody8oeke] {
            font-size: 0.85rem;
        }
}
/* /Components/Pages/DashboardFeatures/Components/CoachDashboardView.razor.rz.scp.css */
/* ============================================
   COACH DASHBOARD — Redesigned
   Design tokens: primary #70AFFB, dark teal #32677E,
   accent #F97316, bg #F8F9FB, text #1E293B, border #E0E6EB
   ============================================ */

/* ── ROOT ── */
.coach-dashboard[b-yq9u0tzue9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ── TRIAL BANNER ── */
.trial-banner[b-yq9u0tzue9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #92400E;
}

.trial-banner .rzi[b-yq9u0tzue9] { font-size: 18px; color: #D97706; }

/* ── INVITES ── */
.invites-section[b-yq9u0tzue9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invite-card[b-yq9u0tzue9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #32677E 0%, #1a202c 100%);
    border-radius: 12px;
    color: white;
    flex-wrap: wrap;
}

.invite-body[b-yq9u0tzue9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.invite-icon-wrap[b-yq9u0tzue9] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invite-icon-wrap .rzi[b-yq9u0tzue9] { font-size: 22px; color: white; }

.invite-text[b-yq9u0tzue9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invite-title[b-yq9u0tzue9] { font-weight: 700; font-size: 0.9rem; }
.invite-subtitle[b-yq9u0tzue9] { font-size: 0.8rem; opacity: 0.85; }

/* ── GRID LAYOUT ── */
.coach-grid[b-yq9u0tzue9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

/* ── SECTION CARDS ── */
.dash-section[b-yq9u0tzue9] {
    background: white;
    border-radius: 14px;
    padding: 1.15rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #E0E6EB;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.section-head[b-yq9u0tzue9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-head-left[b-yq9u0tzue9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.section-head-left .rzi[b-yq9u0tzue9] {
    color: #70AFFB;
    font-size: 1.15rem;
}

.section-head h4[b-yq9u0tzue9] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
}

.section-link[b-yq9u0tzue9] {
    font-size: 0.82rem;
    color: #70AFFB;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.section-link:hover[b-yq9u0tzue9] { text-decoration: underline; }

.section-filter[b-yq9u0tzue9] {
    min-width: 140px;
    max-width: 180px;
}

/* ── READINESS LIST ── */
.readiness-list[b-yq9u0tzue9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.readiness-row[b-yq9u0tzue9] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    border: 1px solid transparent;
    background: #F8F9FB;
}

.readiness-row:hover[b-yq9u0tzue9] {
    background: #EFF6FF;
    border-color: #70AFFB;
    transform: translateX(3px);
}

.readiness-row--attention[b-yq9u0tzue9] {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border-left: 3px solid #DC2626;
}

.readiness-row--building[b-yq9u0tzue9] {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border-left: 3px solid #F59E0B;
}

.readiness-row--ready[b-yq9u0tzue9] {
    background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    border-left: 3px solid #22C55E;
}

.readiness-rank[b-yq9u0tzue9] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    color: #64748B;
    background: rgba(255,255,255,0.8);
    border-radius: 6px;
    flex-shrink: 0;
}

.readiness-row--attention .readiness-rank .rzi[b-yq9u0tzue9] { color: #DC2626; }

.readiness-avatar[b-yq9u0tzue9] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.readiness-info[b-yq9u0tzue9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.readiness-name[b-yq9u0tzue9] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.readiness-sport[b-yq9u0tzue9] {
    font-size: 0.72rem;
    color: #64748B;
}

.readiness-score-wrap[b-yq9u0tzue9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 72px;
    flex-shrink: 0;
}

.readiness-pct[b-yq9u0tzue9] {
    font-weight: 700;
    font-size: 1rem;
    color: #1E293B;
}

.readiness-bar[b-yq9u0tzue9] {
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.readiness-bar-fill[b-yq9u0tzue9] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.readiness-bar-fill--attention[b-yq9u0tzue9] { background: linear-gradient(90deg, #DC2626, #EF4444); }
.readiness-bar-fill--building[b-yq9u0tzue9] { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.readiness-bar-fill--ready[b-yq9u0tzue9] { background: linear-gradient(90deg, #22C55E, #4ADE80); }

.readiness-pill[b-yq9u0tzue9] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.readiness-pill--attention[b-yq9u0tzue9] { color: #DC2626; }
.readiness-pill--building[b-yq9u0tzue9] { color: #D97706; }
.readiness-pill--ready[b-yq9u0tzue9] { color: #16A34A; }

/* ── EMPTY / LOADING ── */
.empty-state[b-yq9u0tzue9] {
    text-align: center;
    padding: 1.5rem 1rem;
    background: #F8F9FB;
    border-radius: 10px;
    border: 2px dashed #E0E6EB;
}

.empty-state-icon[b-yq9u0tzue9] {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon .rzi[b-yq9u0tzue9] { font-size: 24px; color: #94A3B8; }

.empty-state-title[b-yq9u0tzue9] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748B;
}

.empty-state-text[b-yq9u0tzue9] {
    margin: 0;
    font-size: 0.82rem;
    color: #94A3B8;
}

.loading-placeholder[b-yq9u0tzue9] {
    padding: 2rem;
    text-align: center;
}

.loading-placeholder p[b-yq9u0tzue9] {
    margin-top: 0.5rem;
    color: #64748B;
    font-size: 0.85rem;
}

/* ── CHILD OVERFLOW GUARD ── */
[b-yq9u0tzue9] .activity-feed,
[b-yq9u0tzue9] .coach-notes-manager {
    max-width: 100%;
    overflow: hidden;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .coach-grid[b-yq9u0tzue9] { gap: 1rem; }
    .dash-section[b-yq9u0tzue9] { padding: 1rem; }
}

@media (max-width: 768px) {
    .coach-grid[b-yq9u0tzue9] { grid-template-columns: 1fr; }

    .section-head[b-yq9u0tzue9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-filter[b-yq9u0tzue9] {
        width: 100%;
        max-width: 100%;
    }

    .readiness-row[b-yq9u0tzue9] {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .readiness-score-wrap[b-yq9u0tzue9] {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        margin-top: 0.2rem;
    }

    .readiness-bar[b-yq9u0tzue9] { flex: 1; }
}

/* /Components/Pages/DashboardFeatures/Components/CoachStatusHeader.razor.rz.scp.css */
/* ============================================
   COACH STATUS HEADER STYLES
   Priority-based command center design
   ============================================ */

.coach-status-header[b-xsakwhd5k9] {
    margin-bottom: 1.5rem;
}

.status-card[b-xsakwhd5k9] {
    background: linear-gradient(135deg, #32677E 0%, #1E4A5A 100%);
    border-radius: 20px;
    padding: 1.5rem;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 8px 32px rgba(30, 74, 90, 0.25);
}

/* ========================================
   IDENTITY SECTION (Compact)
   ======================================== */

.identity-section[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.identity-info[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.coach-name[b-xsakwhd5k9] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-role[b-xsakwhd5k9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.fighter-count-badge[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .fighter-count-badge:hover[b-xsakwhd5k9] {
        background: rgba(255, 255, 255, 0.25);
    }

    .fighter-count-badge .count[b-xsakwhd5k9] {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .fighter-count-badge .label[b-xsakwhd5k9] {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
        color: white !important;
    }

/* ========================================
   ATTENTION SECTION (Priority Alert)
   ======================================== */

.attention-section[b-xsakwhd5k9] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 14px;
    padding: 1rem;
}

.attention-header[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.attention-icon[b-xsakwhd5k9] {
    width: 28px;
    height: 28px;
    background: #EF4444;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .attention-icon .rzi[b-xsakwhd5k9] {
        font-size: 18px;
        color: white;
    }

.attention-title[b-xsakwhd5k9] {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.attention-count[b-xsakwhd5k9] {
    background: #EF4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.attention-list[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attention-item[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .attention-item:hover[b-xsakwhd5k9] {
        background: rgba(255, 255, 255, 0.2);
    }

.attention-fighter-info[b-xsakwhd5k9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .attention-fighter-info .fighter-name[b-xsakwhd5k9] {
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.attention-reason[b-xsakwhd5k9] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.attention-indicator[b-xsakwhd5k9] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .attention-indicator .rzi[b-xsakwhd5k9] {
        font-size: 16px;
    }

    .attention-indicator.low[b-xsakwhd5k9] {
        background: rgba(239, 68, 68, 0.3);
    }

    .attention-indicator.missed[b-xsakwhd5k9] {
        background: rgba(249, 115, 22, 0.3);
    }

    .attention-indicator.inactive[b-xsakwhd5k9] {
        background: rgba(156, 163, 175, 0.3);
    }

    .attention-indicator.weight[b-xsakwhd5k9] {
        background: rgba(234, 179, 8, 0.3);
    }

    .attention-indicator.injury[b-xsakwhd5k9] {
        background: rgba(168, 85, 247, 0.3);
    }

.attention-more[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .attention-more:hover[b-xsakwhd5k9] {
        color: white;
    }

    .attention-more .rzi[b-xsakwhd5k9] {
        font-size: 16px;
    }

/* All Good State */
.all-good-section[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 14px;
}

.all-good-icon[b-xsakwhd5k9] {
    width: 28px;
    height: 28px;
    background: #22C55E;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .all-good-icon .rzi[b-xsakwhd5k9] {
        font-size: 18px;
        color: white;
    }

.all-good-text[b-xsakwhd5k9] {
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   TODAY'S SESSIONS SECTION
   ======================================== */

.today-section[b-xsakwhd5k9] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 14px;
    padding: 1rem;
}

.today-header[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.today-icon[b-xsakwhd5k9] {
    width: 28px;
    height: 28px;
    background: #3B82F6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .today-icon .rzi[b-xsakwhd5k9] {
        font-size: 18px;
        color: white;
    }

.today-title[b-xsakwhd5k9] {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.today-count[b-xsakwhd5k9] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

    .today-count.complete[b-xsakwhd5k9] {
        background: #22C55E;
    }

.sessions-list[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.session-fighter-row[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .session-fighter-row:hover[b-xsakwhd5k9] {
        background: rgba(255, 255, 255, 0.2);
    }

.session-fighter-info[b-xsakwhd5k9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-fighter-name[b-xsakwhd5k9] {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-types[b-xsakwhd5k9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.session-type-chip[b-xsakwhd5k9] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .session-type-chip .rzi[b-xsakwhd5k9] {
        font-size: 12px;
    }

    .session-type-chip.done[b-xsakwhd5k9] {
        background: rgba(34, 197, 94, 0.3);
        text-decoration: line-through;
        opacity: 0.7;
    }

.session-more-chip[b-xsakwhd5k9] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.session-status[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

    .session-status.complete[b-xsakwhd5k9] {
        color: #22C55E;
    }

    .session-status .rzi[b-xsakwhd5k9] {
        font-size: 20px;
    }

.sessions-more[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .sessions-more:hover[b-xsakwhd5k9] {
        color: white;
    }

    .sessions-more .rzi[b-xsakwhd5k9] {
        font-size: 16px;
    }

/* Fallback simple session display */
.session-simple[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.session-bar[b-xsakwhd5k9] {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.session-bar-fill[b-xsakwhd5k9] {
    height: 100%;
    background: #22C55E;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.session-tap-hint[b-xsakwhd5k9] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    cursor: pointer;
}

    .session-tap-hint:hover[b-xsakwhd5k9] {
        color: rgba(255, 255, 255, 0.9);
    }

/* ========================================
   STATUS GRID (Fight + Camps)
   ======================================== */

.status-grid[b-xsakwhd5k9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.status-box[b-xsakwhd5k9] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .status-box:hover[b-xsakwhd5k9] {
        background: rgba(255, 255, 255, 0.18);
        transform: translateY(-2px);
    }

    .status-box.urgent[b-xsakwhd5k9] {
        background: rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.4);
    }

.status-box-header[b-xsakwhd5k9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}

    .status-box-header .rzi[b-xsakwhd5k9] {
        font-size: 14px;
    }

.status-box-content[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Upcoming Fight */
.status-box.fight .status-box-content[b-xsakwhd5k9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.fight-countdown[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.fight-days[b-xsakwhd5k9] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.status-box.urgent .fight-days[b-xsakwhd5k9] {
    color: #FDE68A;
}

.fight-days-label[b-xsakwhd5k9] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.fight-details[b-xsakwhd5k9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fight-fighter[b-xsakwhd5k9] {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fight-opponent[b-xsakwhd5k9] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.no-fights[b-xsakwhd5k9] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Active Camps Box */
.status-box.camps .status-box-content[b-xsakwhd5k9] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
}

.camps-count[b-xsakwhd5k9] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.camps-label[b-xsakwhd5k9] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   ACTIONS SECTION
   ======================================== */

.actions-section[b-xsakwhd5k9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .actions-section[b-xsakwhd5k9]  .rz-button {
        flex: 1;
        min-width: 100px;
        font-weight: 600;
        border-radius: 12px;
        padding: 0.65rem 0.75rem;
        font-size: 0.85rem;
        transition: all 0.2s ease;
    }

    .actions-section[b-xsakwhd5k9]  .primary-action {
        background: white !important;
        color: #32677E !important;
        border: none !important;
    }

        .actions-section[b-xsakwhd5k9]  .primary-action:hover {
            background: #f0f9ff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

    .actions-section[b-xsakwhd5k9]  .secondary-action {
        background: rgba(255, 255, 255, 0.12) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

        .actions-section[b-xsakwhd5k9]  .secondary-action:hover {
            background: rgba(255, 255, 255, 0.22) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            transform: translateY(-2px);
        }

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    .status-card[b-xsakwhd5k9] {
        padding: 1.25rem;
        gap: 1rem;
        border-radius: 16px;
    }

    .coach-name[b-xsakwhd5k9] {
        font-size: 1.25rem;
    }

    .status-grid[b-xsakwhd5k9] {
        grid-template-columns: 1fr;
    }

    .status-box.fight .status-box-content[b-xsakwhd5k9] {
        flex-direction: row;
    }

    .actions-section[b-xsakwhd5k9] {
        flex-direction: column;
    }

        .actions-section[b-xsakwhd5k9]  .rz-button {
            width: 100%;
            min-width: unset;
        }

    .attention-item[b-xsakwhd5k9] {
        padding: 0.5rem 0.6rem;
    }

    .attention-fighter-info .fighter-name[b-xsakwhd5k9] {
        font-size: 0.85rem;
    }

    /* Sessions: Stack vertically on tablet */
    .session-fighter-row[b-xsakwhd5k9] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .session-fighter-info[b-xsakwhd5k9] {
        width: 100%;
    }

    .session-types[b-xsakwhd5k9] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .session-type-chip[b-xsakwhd5k9] {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .session-status[b-xsakwhd5k9] {
        align-self: flex-end;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .session-fighter-row[b-xsakwhd5k9] {
        position: relative;
    }
}

@media (max-width: 576px) {
    .status-card[b-xsakwhd5k9] {
        padding: 1rem;
    }

    .identity-section[b-xsakwhd5k9] {
        flex-wrap: wrap;
    }

    .fighter-count-badge[b-xsakwhd5k9] {
        margin-left: auto;
    }

    /* Sessions: Even more compact on phone */
    .session-fighter-row[b-xsakwhd5k9] {
        padding: 0.75rem;
        padding-right: 3rem; /* Make room for status badge */
    }

    .session-fighter-name[b-xsakwhd5k9] {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .session-types[b-xsakwhd5k9] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }

    .session-type-chip[b-xsakwhd5k9] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        font-size: 0.75rem;
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .session-type-chip .rzi[b-xsakwhd5k9] {
        font-size: 14px;
        flex-shrink: 0;
    }

    .session-more-chip[b-xsakwhd5k9] {
        padding: 8px 12px;
        font-size: 0.75rem;
        width: 100%;
        text-align: center;
    }

    .session-status[b-xsakwhd5k9] {
        top: 0.75rem;
        right: 0.75rem;
    }
}
/* /Components/Pages/DashboardFeatures/Components/FighterDashboard.razor.rz.scp.css */
/* ============================================
   FIGHTER DASHBOARD — Redesigned
   Design tokens: primary #70AFFB, dark teal #32677E,
   accent #F97316, bg #F8F9FB, text #1E293B, border #E0E6EB
   ============================================ */

/* ── ROOT ── */
.fighter-dashboard[b-rlq83xxfcv] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── TRIAL BANNER ── */
.trial-banner[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #92400E;
}

.trial-banner .rzi[b-rlq83xxfcv] {
    font-size: 18px;
    color: #D97706;
}

/* ── REMINDERS ── */
.reminders-strip[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reminder-card[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.reminder-card:active[b-rlq83xxfcv] { transform: scale(0.985); }

.reminder--weight[b-rlq83xxfcv] {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    border: 1px solid #FCA5A5;
}

.reminder--wellness[b-rlq83xxfcv] {
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    border: 1px solid #93C5FD;
}

.reminder-body[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.reminder-icon-wrap[b-rlq83xxfcv] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reminder-icon-wrap .rzi[b-rlq83xxfcv] { font-size: 20px; }

.reminder-icon--weight[b-rlq83xxfcv] {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

.reminder-icon--wellness[b-rlq83xxfcv] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.reminder-text[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reminder-title[b-rlq83xxfcv] {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1E293B;
    line-height: 1.3;
}

.reminder--weight .reminder-title[b-rlq83xxfcv] { color: #B91C1C; }

.reminder-subtitle[b-rlq83xxfcv] {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.2;
}

.reminder-actions[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.reminder-cta[b-rlq83xxfcv] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: transform 0.1s ease;
}

.reminder-cta:active[b-rlq83xxfcv] { transform: scale(0.9); }
.reminder-cta--weight[b-rlq83xxfcv] { background: #22C55E; }
.reminder-cta--wellness[b-rlq83xxfcv] { background: #3B82F6; }
.reminder-cta[b-rlq83xxfcv]  .rzi { font-size: 16px; }

.reminder-dismiss[b-rlq83xxfcv] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.07);
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.reminder-dismiss:hover[b-rlq83xxfcv] { background: rgba(0, 0, 0, 0.14); }
.reminder-dismiss[b-rlq83xxfcv]  .rzi { font-size: 14px; }

/* ── INVITES ── */
.invites-section[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invite-card[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #32677E 0%, #1a202c 100%);
    border-radius: 12px;
    color: white;
    flex-wrap: wrap;
}

.invite-body[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.invite-icon-wrap[b-rlq83xxfcv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invite-icon-wrap .rzi[b-rlq83xxfcv] { font-size: 22px; color: white; }

.invite-text[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invite-title[b-rlq83xxfcv] {
    font-weight: 700;
    font-size: 0.9rem;
}

.invite-subtitle[b-rlq83xxfcv] {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* ── MAIN GRID ── */
.dash-grid[b-rlq83xxfcv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.dash-col[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── SECTION CARDS ── */
.dash-section[b-rlq83xxfcv] {
    background: white;
    border-radius: 14px;
    padding: 1.15rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #E0E6EB;
}

.section-head[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.section-head-left[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.section-head-left .rzi[b-rlq83xxfcv] {
    font-size: 1.15rem;
    color: #70AFFB;
}

.section-head h3[b-rlq83xxfcv] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
}

.section-footer[b-rlq83xxfcv] {
    margin-top: 0.85rem;
    text-align: center;
}

.section-footer[b-rlq83xxfcv]  .rz-button {
    width: 100%;
}

/* ── ORGANIZATIONS ── */
.org-list[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.org-block[b-rlq83xxfcv] {
    border-radius: 10px;
    background: #F8F9FB;
    border: 1px solid #E0E6EB;
    overflow: hidden;
}

.org-block .org-row[b-rlq83xxfcv] {
    border: none;
    background: transparent;
}

.org-row[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: #F8F9FB;
    border: 1px solid #E0E6EB;
    transition: background 0.15s ease;
    cursor: default;
}

.org-row:hover[b-rlq83xxfcv] {
    background: #EFF6FF;
}

.org-logo-wrap[b-rlq83xxfcv] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.org-logo-img[b-rlq83xxfcv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.org-logo-fallback[b-rlq83xxfcv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #32677E, #70AFFB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.org-logo-fallback .rzi[b-rlq83xxfcv] { font-size: 20px; }

.org-info[b-rlq83xxfcv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.org-name[b-rlq83xxfcv] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-meta[b-rlq83xxfcv] {
    font-size: 0.78rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.org-meta .rzi[b-rlq83xxfcv] { font-size: 14px; color: #70AFFB; }

.coach-tag[b-rlq83xxfcv] { color: #475569; }
.coach-tag--primary[b-rlq83xxfcv] { font-weight: 600; color: #1E293B; }
.coach-tag--more[b-rlq83xxfcv] { color: #94A3B8; font-style: italic; }

.org-chevron[b-rlq83xxfcv] { color: #CBD5E1; font-size: 20px !important; flex-shrink: 0; }

/* ── EMPTY / LOADING STATES ── */
.empty-state[b-rlq83xxfcv] {
    text-align: center;
    padding: 1.5rem 1rem;
    background: #F8F9FB;
    border-radius: 10px;
    border: 2px dashed #E0E6EB;
}

.empty-state-icon[b-rlq83xxfcv] {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon .rzi[b-rlq83xxfcv] { font-size: 24px; color: #94A3B8; }

.empty-state-title[b-rlq83xxfcv] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748B;
}

.empty-state-text[b-rlq83xxfcv] {
    margin: 0;
    font-size: 0.82rem;
    color: #94A3B8;
}

.loading-placeholder[b-rlq83xxfcv] {
    padding: 1.5rem;
    text-align: center;
}

.loading-placeholder p[b-rlq83xxfcv] {
    margin-top: 0.5rem;
    color: #64748B;
    font-size: 0.85rem;
}

/* ── PROFILE CARD (used by FighterStatusHeader) ── */
.profile-card-modern[b-rlq83xxfcv] { padding: 1.5rem !important; }

.profile-header-content[b-rlq83xxfcv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.profile-left[b-rlq83xxfcv] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.profile-info-modern h3[b-rlq83xxfcv] { margin: 0; font-size: 1.75rem; }

/* ── QUICK STATS (inside header) ── */
.quick-stats-row[b-rlq83xxfcv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.stat-box[b-rlq83xxfcv] {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
}

.stat-box .stat-icon[b-rlq83xxfcv] {
    width: 28px;
    height: 28px;
    margin: 0 auto 0.3rem;
    border-radius: 7px;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-box .stat-icon .rzi[b-rlq83xxfcv] { font-size: 16px; color: white; }
.stat-value[b-rlq83xxfcv] { font-size: 1.5rem; font-weight: 700; color: white; line-height: 1; margin-bottom: 0.2rem; }
.stat-label[b-rlq83xxfcv] { font-size: 0.7rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── ACTION BUTTONS ── */
.action-buttons-modern[b-rlq83xxfcv] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 100%;
}

.action-buttons-modern[b-rlq83xxfcv]  .rz-button { flex: 1; min-width: 140px; }

/* ── ANIMATION ── */
@keyframes slideDown-b-rlq83xxfcv {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.onboard-banner[b-rlq83xxfcv] { animation: slideDown-b-rlq83xxfcv 0.3s ease-out; }

/* ── RESPONSIVE ── */
@media (min-width: 640px) {
    .reminders-strip[b-rlq83xxfcv] {
        flex-direction: row;
        gap: 0.5rem;
    }
    .reminder-card[b-rlq83xxfcv] { flex: 1; }
}

@media (max-width: 768px) {
    .dash-grid[b-rlq83xxfcv] { grid-template-columns: 1fr; }

    .profile-card-modern[b-rlq83xxfcv] { padding: 1rem !important; }
    .profile-left[b-rlq83xxfcv] { flex-direction: column; text-align: center; }
    .profile-info-modern h3[b-rlq83xxfcv] { font-size: 1.35rem; }

    .quick-stats-row[b-rlq83xxfcv] { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .stat-box[b-rlq83xxfcv] { padding: 0.6rem 0.4rem; }
    .stat-value[b-rlq83xxfcv] { font-size: 1.25rem; }
    .stat-label[b-rlq83xxfcv] { font-size: 0.62rem; }

    .action-buttons-modern[b-rlq83xxfcv] { flex-direction: column; }
    .action-buttons-modern[b-rlq83xxfcv]  .rz-button { width: 100%; flex: none; }
}


/* /Components/Pages/DashboardFeatures/Components/FighterStatusHeader.razor.rz.scp.css */
/* ============================================
   FIGHTER STATUS HEADER STYLES
   Readiness-focused status card
   Mobile-first responsive design
   ============================================ */

/* --------------------------------------------
   1. CONTAINER & CARD
   Slate-blue theme - serious but brand-aligned
   -------------------------------------------- */
.fighter-status-header[b-sojfwg9j14] {
    margin-bottom: 1.5rem;
}

.status-card[b-sojfwg9j14] {
    background: linear-gradient(135deg, #191A2F 0%, #193153  50%, #10335E 100%);
    border-radius: var(--cl-radius-xl, 20px);
    padding: 1.25rem;
    color: white;
    border: 1px solid rgba(112, 175, 251, 0.15);
}

/* --------------------------------------------
   2. IDENTITY SECTION
   Avatar + Name + Subtitle (always horizontal)
   -------------------------------------------- */
.identity-section[b-sojfwg9j14] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.identity-info[b-sojfwg9j14] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fighter-name[b-sojfwg9j14] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: white;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fighter-subtitle[b-sojfwg9j14] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    line-height: 1.3;
}

.fighter-subtitle-line2[b-sojfwg9j14] {
    font-size: 0.8rem;
    color:gold;
    font-weight: 400;
    line-height: 1.3;
  
}

/* --------------------------------------------
   3. READINESS SECTION (PRIMARY FOCUS)
   Compact: percentage + bar + hint
   -------------------------------------------- */
.readiness-section[b-sojfwg9j14] {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.readiness-display[b-sojfwg9j14] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.readiness-value[b-sojfwg9j14] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    transition: color 0.3s ease;
}

.readiness-percent[b-sojfwg9j14] {
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0.85;
}

.readiness-label[b-sojfwg9j14] {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* Readiness Bar */
.readiness-bar-container[b-sojfwg9j14] {
    margin-bottom: 0.6rem;
}

.readiness-bar[b-sojfwg9j14] {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.readiness-bar-fill[b-sojfwg9j14] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background-color 0.3s ease;
}

/* Color classes for readiness */
.color-success[b-sojfwg9j14] {
    color: #4ADE80;
}
.color-success.readiness-bar-fill[b-sojfwg9j14] {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.color-info[b-sojfwg9j14] {
    color: #70AFFB;
}
.color-info.readiness-bar-fill[b-sojfwg9j14] {
    background: linear-gradient(90deg, #3B82F6, #70AFFB);
}

.color-warning[b-sojfwg9j14] {
    color: #FBBF24;
}
.color-warning.readiness-bar-fill[b-sojfwg9j14] {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.color-danger[b-sojfwg9j14] {
    color: #F87171;
}
.color-danger.readiness-bar-fill[b-sojfwg9j14] {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

/* Readiness hint - simple text, not a button */
.readiness-hint[b-sojfwg9j14] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.85;
}

.readiness-hint .rzi[b-sojfwg9j14] {
    font-size: 14px;
    opacity: 0.9;
}

/* --------------------------------------------
   4. SECONDARY METRICS ROW
   Level + XP + Streak (3 across, compact)
   -------------------------------------------- */
.metrics-row[b-sojfwg9j14] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.metric-card[b-sojfwg9j14] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.metric-card:hover[b-sojfwg9j14] {
    background: rgba(255, 255, 255, 0.08);
}

/* Streak active - only icon changes, not card background */
.metric-card.streak-active[b-sojfwg9j14] {
    /* No background change */
}

.metric-icon[b-sojfwg9j14] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(251, 191, 36, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon .rzi[b-sojfwg9j14] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.metric-icon.xp-icon[b-sojfwg9j14] {
    background: rgba(251, 191, 36, 0.15);
}

.metric-icon.xp-icon .rzi[b-sojfwg9j14] {
    color: #FBBF24;
}

/* Streak active - only the icon gets the fire color */
.streak-active .metric-icon[b-sojfwg9j14] {
    background: rgba(251, 191, 36, 0.15);
}

.streak-active .metric-icon .rzi[b-sojfwg9j14] {
    color: #FB923C;
}

.metric-content[b-sojfwg9j14] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.metric-value[b-sojfwg9j14] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.metric-label[b-sojfwg9j14] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.1rem;
}

/* --------------------------------------------
   5. ACTIONS SECTION
   Compact buttons - white primary
   -------------------------------------------- */
.actions-section[b-sojfwg9j14] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Primary action button - white for contrast */
.actions-section[b-sojfwg9j14]  .primary-action {
    width: 100%;
    order: 1;
}

    .actions-section[b-sojfwg9j14]  .primary-action.rz-button {
        background: #b93b3b !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        padding: 0.7rem .25rem !important;
        border-radius: 999px !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
    }

.actions-section[b-sojfwg9j14]  .primary-action.rz-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.actions-section[b-sojfwg9j14]  .primary-action.rz-button:disabled {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* Secondary action buttons */
.actions-section[b-sojfwg9j14]  .secondary-action {
    order: 2;
}

    .actions-section[b-sojfwg9j14]  .secondary-action.rz-button {
        width: 100%;
        background: rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        border: 2px solid rgba(255,255,255,0.5);
        border-radius: 999px !important;
        padding: 0.6rem 1rem !important;
        transition: all 0.2s ease;
    }

.actions-section[b-sojfwg9j14]  .secondary-action.rz-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Action wrapper for popup positioning */
.action-wrapper[b-sojfwg9j14] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.action-wrapper[b-sojfwg9j14]  .rz-button {
    width: 100%;
}

/* Popup menu */
.action-popup[b-sojfwg9j14] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1E293B;
    border: 1px solid rgba(112, 175, 251, 0.25);
    border-radius: 12px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 100;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: popupFadeIn-b-sojfwg9j14 0.15s ease;
}

@keyframes popupFadeIn-b-sojfwg9j14 {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.popup-option[b-sojfwg9j14] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: nowrap;
    font-family: inherit;
}

.popup-option:hover[b-sojfwg9j14] {
    background: rgba(112, 175, 251, 0.15);
}

.popup-option[b-sojfwg9j14]  .rzi {
    font-size: 18px;
    color: #70AFFB;
}

/* Invisible overlay to close popup on outside click */
.popup-overlay[b-sojfwg9j14] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* --------------------------------------------
   6. RESPONSIVE - TABLET & DESKTOP (min-width: 768px)
   -------------------------------------------- */
@media (min-width: 768px) {
    .status-card[b-sojfwg9j14] {
        padding: 1.5rem;
    }

    .identity-section[b-sojfwg9j14] {
        gap: 1rem;
    }

    .fighter-name[b-sojfwg9j14] {
        font-size: 1.5rem;
    }

    .fighter-subtitle[b-sojfwg9j14] {
        font-size: 0.85rem;
    }

    .fighter-subtitle-line2[b-sojfwg9j14] {
        font-size: 0.8rem;
    }

    .readiness-section[b-sojfwg9j14] {
        padding: 1rem 1.5rem;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }

    .readiness-value[b-sojfwg9j14] {
        font-size: 3rem;
    }

    .metrics-row[b-sojfwg9j14] {
        gap: 0.75rem;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    .metric-card[b-sojfwg9j14] {
        padding: 0.75rem 1rem;
        gap: 0.6rem;
    }

    .metric-value[b-sojfwg9j14] {
        font-size: 1.25rem;
    }

    .metric-label[b-sojfwg9j14] {
        font-size: 0.65rem;
    }

    /* Desktop: All buttons in a row, equal width */
    .actions-section[b-sojfwg9j14] {
        flex-direction: row;
        gap: 0.75rem;
    }

    .action-wrapper[b-sojfwg9j14] {
        order: unset;
    }

    .actions-section[b-sojfwg9j14]  .primary-action,
    .actions-section[b-sojfwg9j14]  .secondary-action {
        flex: 1;
        order: unset;
    }

    .actions-section[b-sojfwg9j14]  .primary-action.rz-button,
    .actions-section[b-sojfwg9j14]  .secondary-action.rz-button {
        width: 100%;
    }
}

/* --------------------------------------------
   7. RESPONSIVE - DESKTOP (min-width: 1024px)
   -------------------------------------------- */
@media (min-width: 1024px) {
    .status-card[b-sojfwg9j14] {
        padding: 1.5rem 2rem;
    }

    .fighter-name[b-sojfwg9j14] {
        font-size: 1.75rem;
    }

    .fighter-subtitle[b-sojfwg9j14] {
        font-size: 0.9rem;
    }

    .fighter-subtitle-line2[b-sojfwg9j14] {
        font-size: 0.85rem;
    }

    .readiness-value[b-sojfwg9j14] {
        font-size: 3.5rem;
    }

    .readiness-section[b-sojfwg9j14] {
        max-width: 420px;
    }

    .metrics-row[b-sojfwg9j14] {
        max-width: 520px;
    }
}

/* --------------------------------------------
   8. CAMP PROGRESS SECTION
   Shows when fighter is in active fight camp
   -------------------------------------------- */
.camp-section[b-sojfwg9j14] {
    text-align: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
}

.camp-section:hover[b-sojfwg9j14] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Camp Header: Badge + Name */
.camp-header[b-sojfwg9j14] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.camp-badge[b-sojfwg9j14] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #EF4444, #F97316);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.camp-badge .rzi[b-sojfwg9j14] {
    font-size: 12px;
}

.camp-name[b-sojfwg9j14] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    opacity: 0.9;
}

/* Camp Stats: 3-column grid */
.camp-stats[b-sojfwg9j14] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.camp-stat[b-sojfwg9j14] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.camp-stat.countdown[b-sojfwg9j14] {
    background: rgba(239, 68, 68, 0.15);
}

.camp-stat .stat-value[b-sojfwg9j14] {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.camp-stat.countdown .stat-value[b-sojfwg9j14] {
    color: #FB923C;
}

.camp-stat .stat-sub[b-sojfwg9j14] {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.6;
}

.camp-stat .stat-label[b-sojfwg9j14] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}

/* Camp Progress Bar */
.camp-progress-container[b-sojfwg9j14] {
    margin-bottom: 0.6rem;
}

.camp-progress-bar[b-sojfwg9j14] {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.camp-progress-fill[b-sojfwg9j14] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #EF4444, #F97316, #FBBF24);
    transition: width 0.5s ease;
}

/* Camp Info: Opponent + Fight Date */
.camp-info[b-sojfwg9j14] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.opponent-info[b-sojfwg9j14],
.fight-date[b-sojfwg9j14] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.opponent-info .rzi[b-sojfwg9j14],
.fight-date .rzi[b-sojfwg9j14] {
    opacity: 0.7;
}

/* Responsive adjustments for camp section */
@media (min-width: 768px) {
    .camp-section[b-sojfwg9j14] {
        padding: 1.25rem 1.5rem;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .camp-stat .stat-value[b-sojfwg9j14] {
        font-size: 1.75rem;
    }

    .camp-name[b-sojfwg9j14] {
        font-size: 1.1rem;
    }
}

@media (min-width: 1024px) {
    .camp-section[b-sojfwg9j14] {
        max-width: 480px;
    }

    .camp-stat .stat-value[b-sojfwg9j14] {
        font-size: 2rem;
    }
}
/* /Components/Pages/DashboardFeatures/Components/NewFighterAlertCard.razor.rz.scp.css */
/* ==========================================================
   NewFighterAlertCard - One-time Pro Status Review Alerts
   Shown to coaches when new fighters complete onboarding
   ========================================================== */

.new-fighter-alerts[b-swsglrmuku] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.new-fighter-alert[b-swsglrmuku] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.alert-icon[b-swsglrmuku] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-content[b-swsglrmuku] {
    flex: 1;
    min-width: 0;
}

.alert-title[b-swsglrmuku] {
    font-size: 0.95rem;
    color: #92400E;
    margin-bottom: 0.125rem;
}

.alert-title strong[b-swsglrmuku] {
    color: #78350F;
}

.alert-subtitle[b-swsglrmuku] {
    font-size: 0.8rem;
    color: #B45309;
}

.alert-actions[b-swsglrmuku] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-pro[b-swsglrmuku] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pro:hover:not(:disabled)[b-swsglrmuku] {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-pro:disabled[b-swsglrmuku] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-pro i[b-swsglrmuku] {
    font-size: 1rem;
}

.btn-dismiss[b-swsglrmuku] {
    padding: 0.5rem 0.875rem;
    background: transparent;
    color: #92400E;
    border: 1px solid #D97706;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-dismiss:hover:not(:disabled)[b-swsglrmuku] {
    background: rgba(217, 119, 6, 0.1);
}

.btn-dismiss:disabled[b-swsglrmuku] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================
   Responsive Adjustments
   ========================================================== */

@media (max-width: 768px) {
    .new-fighter-alert[b-swsglrmuku] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .alert-actions[b-swsglrmuku] {
        width: 100%;
        justify-content: flex-end;
    }

    .btn-pro[b-swsglrmuku], .btn-dismiss[b-swsglrmuku] {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .new-fighter-alert[b-swsglrmuku] {
        padding: 0.875rem;
    }

    .alert-icon[b-swsglrmuku] {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .alert-title[b-swsglrmuku] {
        font-size: 0.875rem;
    }

    .alert-subtitle[b-swsglrmuku] {
        font-size: 0.75rem;
    }

    .alert-actions[b-swsglrmuku] {
        flex-direction: column;
    }

    .btn-pro[b-swsglrmuku], .btn-dismiss[b-swsglrmuku] {
        width: 100%;
    }
}
/* /Components/Pages/DashboardFeatures/Components/OrgTopFightersCard.razor.rz.scp.css */
/* ── OrgTopFightersCard ── */
.org-top5[b-duscd3gxc8] {
    padding: 0 0.85rem 0.5rem;
}

.top5-loading[b-duscd3gxc8] {
    padding: 0.25rem 0;
}

/* ── XP Leaderboard (default mode) ── */
.top5-header[b-duscd3gxc8] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.top5-header[b-duscd3gxc8]  .rzi {
    font-size: 14px;
    color: #F59E0B;
}

.top5-list[b-duscd3gxc8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.top5-row[b-duscd3gxc8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    transition: background 0.12s;
}

.top5-row:hover[b-duscd3gxc8] {
    background: rgba(112, 175, 251, 0.06);
}

.top5-row--me[b-duscd3gxc8] {
    background: rgba(112, 175, 251, 0.08);
    border: 1px solid rgba(112, 175, 251, 0.2);
}

.top5-rank[b-duscd3gxc8] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    color: #94A3B8;
    background: #F1F5F9;
}

.top5-rank--gold[b-duscd3gxc8] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}

.top5-rank--silver[b-duscd3gxc8] {
    background: linear-gradient(135deg, #9CA3AF, #6B7280);
    color: white;
}

.top5-rank--bronze[b-duscd3gxc8] {
    background: linear-gradient(135deg, #D97706, #B45309);
    color: white;
}

.top5-name[b-duscd3gxc8] {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top5-you[b-duscd3gxc8] {
    font-weight: 400;
    color: #70AFFB;
    font-size: 0.72rem;
    margin-left: 0.2rem;
}

.top5-xp[b-duscd3gxc8] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #F59E0B;
    white-space: nowrap;
    flex-shrink: 0;
}

.top5-view-all[b-duscd3gxc8] {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.35rem;
    background: none;
    border: none;
    color: #70AFFB;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    transition: background 0.12s;
}

.top5-view-all:hover[b-duscd3gxc8] {
    background: rgba(112, 175, 251, 0.08);
}

/* ── Readiness Mode ── */
.readiness-header[b-duscd3gxc8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.readiness-header-left[b-duscd3gxc8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E293B;
}

.readiness-header-left[b-duscd3gxc8]  .rzi {
    font-size: 16px;
    color: #70AFFB;
}

.readiness-view-all[b-duscd3gxc8] {
    background: none;
    border: none;
    color: #70AFFB;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.readiness-view-all:hover[b-duscd3gxc8] {
    text-decoration: underline;
}

.readiness-list[b-duscd3gxc8] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.readiness-row[b-duscd3gxc8] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    transition: background 0.15s ease, transform 0.1s ease;
    border: 1px solid transparent;
    background: #F8F9FB;
}

.readiness-row:hover[b-duscd3gxc8] {
    background: #EFF6FF;
    border-color: #70AFFB;
    transform: translateX(2px);
}

.readiness-row--me[b-duscd3gxc8] {
    box-shadow: 0 0 0 1.5px rgba(112, 175, 251, 0.35);
}

.readiness-row--attention[b-duscd3gxc8] {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border-left: 3px solid #DC2626;
}

.readiness-row--building[b-duscd3gxc8] {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border-left: 3px solid #F59E0B;
}

.readiness-row--ready[b-duscd3gxc8] {
    background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    border-left: 3px solid #22C55E;
}

.readiness-rank[b-duscd3gxc8] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    color: #64748B;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    flex-shrink: 0;
}

.readiness-row--attention .readiness-rank[b-duscd3gxc8]  .rzi {
    color: #DC2626;
    font-size: 16px;
}

.readiness-info[b-duscd3gxc8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.readiness-name[b-duscd3gxc8] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.readiness-you[b-duscd3gxc8] {
    font-weight: 400;
    color: #70AFFB;
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

.readiness-sport[b-duscd3gxc8] {
    font-size: 0.68rem;
    color: #64748B;
}

.readiness-score-wrap[b-duscd3gxc8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 60px;
    flex-shrink: 0;
}

.readiness-pct[b-duscd3gxc8] {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1E293B;
}

.readiness-bar[b-duscd3gxc8] {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.readiness-bar-fill[b-duscd3gxc8] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.readiness-bar-fill--attention[b-duscd3gxc8] {
    background: linear-gradient(90deg, #DC2626, #EF4444);
}

.readiness-bar-fill--building[b-duscd3gxc8] {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.readiness-bar-fill--ready[b-duscd3gxc8] {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.readiness-pill[b-duscd3gxc8] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.readiness-pill--attention[b-duscd3gxc8] {
    color: #DC2626;
}

.readiness-pill--building[b-duscd3gxc8] {
    color: #D97706;
}

.readiness-pill--ready[b-duscd3gxc8] {
    color: #16A34A;
}
/* /Components/Pages/DashboardFeatures/Components/ProfileSetupCard.razor.rz.scp.css */
/* ==========================================================
   ProfileSetupCard - Gamified profile completion prompts
   Clean, non-intrusive design with XP incentives
   ========================================================== */

.profile-setup-card[b-l0a7mhisyh] {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: 16px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.profile-setup-card.collapsed[b-l0a7mhisyh] {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-color: #E2E8F0;
}

/* Header */
.setup-header[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.setup-header:hover[b-l0a7mhisyh] {
    background: rgba(255, 255, 255, 0.5);
}

.header-left[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.setup-icon[b-l0a7mhisyh] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #70AFFB 0%, #4A9FEB 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.header-info[b-l0a7mhisyh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.setup-title[b-l0a7mhisyh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1E40AF;
}

.setup-progress[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar[b-l0a7mhisyh] {
    width: 80px;
    height: 6px;
    background: #CBD5E1;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-l0a7mhisyh] {
    height: 100%;
    background: linear-gradient(90deg, #70AFFB 0%, #22C55E 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-l0a7mhisyh] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

.header-right[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.xp-available[b-l0a7mhisyh] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #059669;
    background: #D1FAE5;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.collapse-btn[b-l0a7mhisyh] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748B;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.collapse-btn:hover[b-l0a7mhisyh] {
    background: rgba(0, 0, 0, 0.05);
    color: #1E40AF;
}

/* Tasks List */
.setup-tasks[b-l0a7mhisyh] {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.task-item:hover[b-l0a7mhisyh] {
    border-color: #70AFFB;
    box-shadow: 0 2px 8px rgba(112, 175, 251, 0.15);
    transform: translateX(4px);
}

.task-icon[b-l0a7mhisyh] {
    width: 36px;
    height: 36px;
    background: #F1F5F9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.task-item:hover .task-icon[b-l0a7mhisyh] {
    background: #E0F2FE;
    color: #0284C7;
}

.task-info[b-l0a7mhisyh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.task-title[b-l0a7mhisyh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1F2937;
}

.task-desc[b-l0a7mhisyh] {
    font-size: 0.75rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-reward[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.xp-badge[b-l0a7mhisyh] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #059669;
    background: #ECFDF5;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}

.task-action-btn[b-l0a7mhisyh] {
    display: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: linear-gradient(135deg, #70AFFB 0%, #4A9FEB 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.task-item:hover .task-action-btn[b-l0a7mhisyh] {
    display: flex;
}

.task-item:hover .xp-badge[b-l0a7mhisyh] {
    display: none;
}

.task-action-btn:hover[b-l0a7mhisyh] {
    transform: scale(1.05);
}

.more-tasks-hint[b-l0a7mhisyh] {
    text-align: center;
    font-size: 0.8rem;
    color: #64748B;
    padding: 0.5rem;
    font-style: italic;
}

/* Footer */
.setup-footer[b-l0a7mhisyh] {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    border-top: 1px solid #E2E8F0;
    margin-top: 0.5rem;
}

.dismiss-btn[b-l0a7mhisyh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dismiss-btn:hover[b-l0a7mhisyh] {
    background: #F1F5F9;
    color: #64748B;
}

.dismiss-btn i[b-l0a7mhisyh] {
    font-size: 1rem;
}

/* ==========================================================
   Responsive Adjustments
   ========================================================== */

@media (max-width: 768px) {
    .setup-header[b-l0a7mhisyh] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .header-right[b-l0a7mhisyh] {
        width: 100%;
        justify-content: space-between;
    }

    .progress-bar[b-l0a7mhisyh] {
        width: 60px;
    }

    .task-item[b-l0a7mhisyh] {
        padding: 0.625rem;
    }

    .task-info .task-desc[b-l0a7mhisyh] {
        display: none;
    }

    .task-reward[b-l0a7mhisyh] {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .task-action-btn[b-l0a7mhisyh] {
        display: flex;
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .task-item:hover .xp-badge[b-l0a7mhisyh] {
        display: block;
    }
}

@media (max-width: 480px) {
    .profile-setup-card[b-l0a7mhisyh] {
        margin: 0 -0.5rem 1rem -0.5rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .setup-icon[b-l0a7mhisyh] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .setup-title[b-l0a7mhisyh] {
        font-size: 0.9rem;
    }

    .xp-available[b-l0a7mhisyh] {
        font-size: 0.7rem;
    }
}
/* /Components/Pages/DashboardFeatures/Pages/Dashboard.razor.rz.scp.css */
/* App background */


.home-container[b-kuwrbpf7rh] {
    /*max-width: 920px;*/
    margin: 0 auto;
    padding: 1rem 0rem 5rem; /* bottom for mobile nav */
}

    /* Generic section title (if you use a SectionTitle component, this will still help) */
    .section-title[b-kuwrbpf7rh], .home-container > h3[b-kuwrbpf7rh] {
        margin: 1.1rem 0 .5rem;
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--cl-text-muted);
    }
/* Top �Complete your setup� card should also use this style if possible */
.home-header-card[b-kuwrbpf7rh],
.onboarding-card[b-kuwrbpf7rh] { /* you can add this class to your onboarding card wrapper */
    background: var(--cl-card-bg);
    border-radius: var(--cl-radius-xl);
    padding: 1.2rem 1.5rem;
    box-shadow: var(--cl-shadow-soft);
    margin-bottom: 1rem;
}

    .home-header-card h2[b-kuwrbpf7rh] {
        margin: 0 0 .15rem;
        font-size: 1.35rem;
        font-weight: 700;
    }

    .home-header-card .subtitle[b-kuwrbpf7rh] {
        margin: 0;
        font-size: .82rem;
        color: var(--cl-text-muted);
    }

/* XP / Streak / Challenges row */
.xp-row[b-kuwrbpf7rh] {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

    .xp-row > div[b-kuwrbpf7rh] {
        flex: 1;
        background: #F8FAFF;
        border-radius: 18px;
        padding: .55rem .5rem;
        text-align: center;
        box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 0 0 1px rgba(15,23,42,0.02);
    }

    .xp-row strong[b-kuwrbpf7rh] {
        display: block;
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--cl-text-main);
    }

    .xp-row span[b-kuwrbpf7rh] {
        display: block;
        margin-top: .1rem;
        font-size: .7rem;
        color: var(--cl-text-muted);
    }


/* On very small screens, let them wrap nicely */
@media (max-width: 430px) {
    .quick-action[b-kuwrbpf7rh] {
        width: 45%;
        min-width: 130px;
    }
}




.placeholder-card[b-kuwrbpf7rh] {
    border: 1px solid var(--cl-border, #E0E6EB);
    background: var(--cl-card-bg, #FFFFFF);
    border-radius: var(--cl-radius-xl, 16px);
    padding: 1rem;
    text-align: center;
    color: var(--cl-text-secondary, #6C757D);
    box-shadow: var(--rz-card-shadow);
    margin: 1rem 0;
}

.placeholder-icon[b-kuwrbpf7rh] {
    font-size: 0px;
    color: var(--cl-primary, #70AFFB);
    margin-bottom: 1rem;
}

.placeholder-title[b-kuwrbpf7rh] {
    font-weight: 600;
    color: var(--cl-text-primary, #1E293B);
    margin-bottom: 0.25rem;
}

.placeholder-text[b-kuwrbpf7rh] {
    font-size: 0.9rem;
    color: var(--cl-text-secondary, #6C757D);
    margin: 0;
}

.placeholder-card .rzi[b-kuwrbpf7rh] {
    font-size: 40px;
}


/* Modern Client Dashboard Styles */
.profile-card-modern[b-kuwrbpf7rh] {
    padding: 2rem !important;
}

.profile-header-content[b-kuwrbpf7rh] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-left[b-kuwrbpf7rh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-avatar-large[b-kuwrbpf7rh] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.3);
    object-fit: cover;
}

    .profile-avatar-large.initials-large[b-kuwrbpf7rh] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.2);
        color: white;
        font-size: 2rem;
        font-weight: bold;
    }

.profile-info-modern h3[b-kuwrbpf7rh] {
    margin: 0;
    font-size: 2rem;
}

.quick-stats-row[b-kuwrbpf7rh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-box[b-kuwrbpf7rh] {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
}

.stat-icon[b-kuwrbpf7rh] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.stat-value[b-kuwrbpf7rh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-kuwrbpf7rh] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-buttons-modern[b-kuwrbpf7rh] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

    .action-buttons-modern .rz-button[b-kuwrbpf7rh] {
        flex: 1;
        min-width: 150px;
    }

/* Modern Coach Dashboard Styles - Reuse client styles with coach prefix */
.coach-profile-card-modern[b-kuwrbpf7rh] {
    padding: 2rem !important;
}

.coach-profile-header-content[b-kuwrbpf7rh] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.coach-profile-left[b-kuwrbpf7rh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.coach-profile-avatar-large[b-kuwrbpf7rh] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.3);
    object-fit: cover;
}

    .coach-profile-avatar-large.initials-large[b-kuwrbpf7rh] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.2);
        color: white;
        font-size: 2.5rem;
        font-weight: 700;
    }

.coach-profile-info-modern h3[b-kuwrbpf7rh] {
    margin: 0;
    font-size: 2rem;
}

.coach-quick-stats-row[b-kuwrbpf7rh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.coach-stat-box[b-kuwrbpf7rh] {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
}

.coach-stat-icon[b-kuwrbpf7rh] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.coach-stat-value[b-kuwrbpf7rh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.coach-stat-label[b-kuwrbpf7rh] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coach-action-buttons-modern[b-kuwrbpf7rh] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

    .coach-action-buttons-modern .rz-button[b-kuwrbpf7rh] {
        flex: 1;
        min-width: 150px;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .profile-left[b-kuwrbpf7rh],
    .coach-profile-left[b-kuwrbpf7rh] {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large[b-kuwrbpf7rh],
    .coach-profile-avatar-large[b-kuwrbpf7rh] {
        width: 80px;
        height: 80px;
    }

    .profile-info-modern h3[b-kuwrbpf7rh],
    .coach-profile-info-modern h3[b-kuwrbpf7rh] {
        font-size: 1.5rem;
    }

    .quick-stats-row[b-kuwrbpf7rh],
    .coach-quick-stats-row[b-kuwrbpf7rh] {
        gap: 0.5rem;
    }

    .stat-box[b-kuwrbpf7rh],
    .coach-stat-box[b-kuwrbpf7rh] {
        padding: 0.75rem 0.5rem;
    }

    .stat-icon[b-kuwrbpf7rh],
    .coach-stat-icon[b-kuwrbpf7rh] {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .stat-value[b-kuwrbpf7rh],
    .coach-stat-value[b-kuwrbpf7rh] {
        font-size: 1.5rem;
    }

    .stat-label[b-kuwrbpf7rh],
    .coach-stat-label[b-kuwrbpf7rh] {
        font-size: 0.65rem;
        line-height: 1.2;
    }

    .action-buttons-modern[b-kuwrbpf7rh],
    .coach-action-buttons-modern[b-kuwrbpf7rh] {
        flex-direction: column;
    }

        .action-buttons-modern .rz-button[b-kuwrbpf7rh],
        .coach-action-buttons-modern .rz-button[b-kuwrbpf7rh] {
            width: 100%;
        }

    .profile-card-modern[b-kuwrbpf7rh],
    .coach-profile-card-modern[b-kuwrbpf7rh] {
        padding: 1.25rem !important;
    }

    .profile-header-content[b-kuwrbpf7rh],
    .coach-profile-header-content[b-kuwrbpf7rh] {
        gap: 1.25rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .stat-box[b-kuwrbpf7rh],
    .coach-stat-box[b-kuwrbpf7rh] {
        padding: 0.5rem 0.25rem;
    }

    .stat-icon[b-kuwrbpf7rh],
    .coach-stat-icon[b-kuwrbpf7rh] {
        font-size: 1.25rem;
    }

    .stat-value[b-kuwrbpf7rh],
    .coach-stat-value[b-kuwrbpf7rh] {
        font-size: 1.25rem;
    }

    .stat-label[b-kuwrbpf7rh],
    .coach-stat-label[b-kuwrbpf7rh] {
        font-size: 0.6rem;
    }
}

/* Onboarding banner improvements */
.onboard-banner[b-kuwrbpf7rh] {
    animation: slideDown-b-kuwrbpf7rh 0.4s ease-out;
}

@keyframes slideDown-b-kuwrbpf7rh {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ACTIVITY FEED - Compact colored icon style from FighterProfile */
.activity-feed[b-kuwrbpf7rh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item[b-kuwrbpf7rh] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #E0E6EB;
    transition: all 0.2s;
}

    .activity-item:hover[b-kuwrbpf7rh] {
        background: #F1F5F9;
        transform: translateY(-1px);
    }

.activity-icon[b-kuwrbpf7rh] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

    .activity-icon.checkin[b-kuwrbpf7rh] {
        background: #DCFCE7;
        color: #16A34A;
    }

    .activity-icon.training[b-kuwrbpf7rh] {
        background: #E0F2FE;
        color: #0369A1;
    }

    .activity-icon.achievement[b-kuwrbpf7rh] {
        background: #FEF3C7;
        color: #D97706;
    }

    .activity-icon.biometric[b-kuwrbpf7rh] {
        background: #F3E8FF;
        color: #7C3AED;
    }

    .activity-icon.note[b-kuwrbpf7rh] {
        background: #FEE2E2;
        color: #DC2626;
    }

.activity-content[b-kuwrbpf7rh] {
    flex: 1;
    min-width: 0;
}

.activity-text[b-kuwrbpf7rh] {
    font-size: 0.9rem;
    color: #1E293B;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.activity-time[b-kuwrbpf7rh] {
    font-size: 0.75rem;
    color: #6C757D;
}

/* Activity feed responsive */
@media (max-width: 480px) {
    .activity-item[b-kuwrbpf7rh] {
        padding: 0.75rem;
        gap: 0.65rem;
    }

    .activity-icon[b-kuwrbpf7rh] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .activity-text[b-kuwrbpf7rh] {
        font-size: 0.85rem;
    }

    .activity-time[b-kuwrbpf7rh] {
        font-size: 0.7rem;
    }
}
/* /Components/Pages/FightCampFeature/Components/FightCampBlocksTab.razor.rz.scp.css */
.tab-section[b-g0r5jlnh3f] {
    padding: 1.5rem;
}

.section-header[b-g0r5jlnh3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h3[b-g0r5jlnh3f] {
    margin: 0;
    font-weight: 600;
    color: #1E293B;
}

.empty-state[b-g0r5jlnh3f] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6B7280;
}

.blocks-info-banner[b-g0r5jlnh3f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #EFF6FF;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid #BFDBFE;
}

.blocks-info-banner i.rzi[b-g0r5jlnh3f] {
    color: #3B82F6;
    font-size: 1.25rem;
}

.blocks-info-banner p[b-g0r5jlnh3f] {
    margin: 0;
    color: #1E40AF;
    font-size: 0.9rem;
}

.blocks-timeline[b-g0r5jlnh3f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-card[b-g0r5jlnh3f] {
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    border-left: 4px solid #70AFFB;
    transition: all 0.2s;
}

.block-card:hover[b-g0r5jlnh3f] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.block-card.current[b-g0r5jlnh3f] {
    background: #FEFCE8;
    border-color: #FEF08A;
    border-left-color: #F59E0B;
}

.block-header[b-g0r5jlnh3f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.block-title-row[b-g0r5jlnh3f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.block-type-badge[b-g0r5jlnh3f] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.block-header h4[b-g0r5jlnh3f] {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: #1E293B;
}

.current-badge[b-g0r5jlnh3f] {
    background: #F59E0B;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.block-actions[b-g0r5jlnh3f] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.block-description[b-g0r5jlnh3f] {
    font-size: 0.9rem;
    color: #6B7280;
    margin: 0.5rem 0;
    line-height: 1.5;
}

.block-meta[b-g0r5jlnh3f] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 0.75rem;
}

.block-dates[b-g0r5jlnh3f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #70AFFB;
    font-weight: 600;
}

.block-dates i.rzi[b-g0r5jlnh3f] {
    font-size: 1rem;
}

.block-duration[b-g0r5jlnh3f] {
    color: #6B7280;
    font-weight: 500;
}

.block-stats[b-g0r5jlnh3f] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-pill[b-g0r5jlnh3f] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #F3F4F6;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
}

.stat-pill i.rzi[b-g0r5jlnh3f] {
    font-size: 0.85rem;
}

.stat-pill.sparring[b-g0r5jlnh3f] {
    background: #FEE2E2;
    color: #DC2626;
}

.block-focus[b-g0r5jlnh3f] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #6B7280;
}

.block-focus strong[b-g0r5jlnh3f] {
    color: #1E293B;
}
/* /Components/Pages/FightCampFeature/Components/FightCampFighterTab.razor.rz.scp.css */
.tab-section[b-el4ash1bhp] {
    padding: 1.5rem;
}

.tab-section > h3[b-el4ash1bhp] {
    margin: 0 0 1.5rem;
    font-weight: 600;
    color: #1E293B;
}

.empty-state[b-el4ash1bhp] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6B7280;
}

.fighter-summary-card[b-el4ash1bhp] {
    background: #F9FAFB;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #E5E7EB;
}

.fighter-header[b-el4ash1bhp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.fighter-avatar-large[b-el4ash1bhp] {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #70AFFB, #5A9FEB);
}

.fighter-avatar-large.initials[b-el4ash1bhp] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    font-weight: 700;
}

.fighter-header-info[b-el4ash1bhp] {
    flex: 1;
    min-width: 200px;
}

.fighter-header-info h2[b-el4ash1bhp] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.fighter-division[b-el4ash1bhp],
.fighter-record[b-el4ash1bhp] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.fighter-division[b-el4ash1bhp] {
    background: #EEF6FF;
    color: #70AFFB;
}

.fighter-record[b-el4ash1bhp] {
    background: #F0FDF4;
    color: #16A34A;
}

.fighter-stats-grid[b-el4ash1bhp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fighter-stat[b-el4ash1bhp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}

.fighter-stat .stat-icon[b-el4ash1bhp] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #EEF6FF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fighter-stat .stat-icon i.rzi[b-el4ash1bhp] {
    color: #70AFFB;
    font-size: 1.5rem;
}

.fighter-stat .stat-content[b-el4ash1bhp] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fighter-stat .stat-value[b-el4ash1bhp] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1E293B;
}

.fighter-stat .stat-label[b-el4ash1bhp] {
    font-size: 0.8rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weight-tracker[b-el4ash1bhp] {
    padding: 1rem 1.25rem;
    background: #FEFCE8;
    border-radius: 12px;
    border: 1px solid #FEF08A;
}

.weight-tracker h4[b-el4ash1bhp] {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #854D0E;
}

.weight-diff[b-el4ash1bhp] {
    font-size: 1.25rem;
    font-weight: 700;
}

.weight-diff.over[b-el4ash1bhp] {
    color: #DC2626;
}

.weight-diff.under[b-el4ash1bhp] {
    color: #16A34A;
}

@media (max-width: 768px) {
    .fighter-stats-grid[b-el4ash1bhp] {
        grid-template-columns: 1fr;
    }

    .fighter-header[b-el4ash1bhp] {
        flex-direction: column;
        text-align: center;
    }

    .fighter-header-info[b-el4ash1bhp] {
        text-align: center;
    }
}
/* /Components/Pages/FightCampFeature/Components/FightCampHeader.razor.rz.scp.css */
/* =============================================
   FIGHT CAMP HEADER - COMPACT MOBILE-FIRST
   Modern iOS-inspired design language
   ============================================= */

.camp-header[b-hgw1v68p3d] {
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ===== HERO SECTION ===== */
.header-hero[b-hgw1v68p3d] {
    padding: 1rem;
    background: linear-gradient(145deg, #1C1C1E 0%, #2C2C2E 100%);
    color: white;
}

/* Status-based gradients - subtle, professional */
.status-active .header-hero[b-hgw1v68p3d] {
    background: linear-gradient(145deg, #1a3a2a 0%, #234d35 100%);
}
.status-planning .header-hero[b-hgw1v68p3d] {
    background: linear-gradient(145deg, #3b3b3b 0%, #47250c 100%);
}
.status-completed .header-hero[b-hgw1v68p3d] {
    background: linear-gradient(145deg, #1a2a4a 0%, #234068 100%);
}
.status-cancelled .header-hero[b-hgw1v68p3d] {
    background: linear-gradient(145deg, #3d1a1a 0%, #5c2a2a 100%);
}
.status-fightweek .header-hero[b-hgw1v68p3d] {
    background: linear-gradient(145deg, #4a1a1a 0%, #6b2d15 100%);
}

/* Top Row: Status + Edit */
.hero-top-row[b-hgw1v68p3d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.status-chip[b-hgw1v68p3d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-dot[b-hgw1v68p3d] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34C759;
}

.status-planning .status-dot[b-hgw1v68p3d] { background: #FFD60A; }
.status-completed .status-dot[b-hgw1v68p3d] { background: #007AFF; }
.status-cancelled .status-dot[b-hgw1v68p3d] { background: #FF453A; }
.status-fightweek .status-dot[b-hgw1v68p3d] { 
    background: #FF9F0A;
    animation: pulse-dot-b-hgw1v68p3d 1s ease-in-out infinite;
}

@keyframes pulse-dot-b-hgw1v68p3d {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.edit-btn[b-hgw1v68p3d] {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.edit-btn:active[b-hgw1v68p3d] {
    background: rgba(255,255,255,0.2);
}

.edit-btn .rzi[b-hgw1v68p3d] {
    font-size: 16px;
}

/* Main: Title + Countdown */
.hero-main[b-hgw1v68p3d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.hero-left[b-hgw1v68p3d] {
    flex: 1;
    min-width: 0;
}

.camp-title[b-hgw1v68p3d] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
}

.opponent-line[b-hgw1v68p3d] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.9rem;
}

.vs-label[b-hgw1v68p3d] {
    font-size: 0.6rem;
    opacity: 0.5;
    text-transform: uppercase;
    font-weight: 500;
}

.opponent-name[b-hgw1v68p3d] {
    font-weight: 600;
    color: #FF9F0A;
}

.event-line[b-hgw1v68p3d] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 3px;
}

/* Countdown Box */
.countdown-box[b-hgw1v68p3d] {
    flex-shrink: 0;
    text-align: center;
    background: rgba(255,255,255,0.08);
    padding: 10px 16px;
    border-radius: 14px;
    min-width: 64px;
}

.countdown-num[b-hgw1v68p3d] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}

.countdown-unit[b-hgw1v68p3d] {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-top: 2px;
}

/* Progress Strip */
.progress-strip[b-hgw1v68p3d] {
    margin-top: 0.875rem;
}

.progress-bar[b-hgw1v68p3d] {
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-hgw1v68p3d] {
    height: 100%;
    background: #34C759;
    border-radius: 2px;
    transition: width 0.4s ease-out;
}

.progress-meta[b-hgw1v68p3d] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    margin-top: 6px;
    opacity: 0.6;
}

.progress-pct[b-hgw1v68p3d] {
    font-weight: 600;
    opacity: 1;
    color: #34C759;
}

/* ===== STATS GRID ===== */
.stats-grid[b-hgw1v68p3d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    background: #F2F2F7;
    padding: 6px;
}

.stat-pill[b-hgw1v68p3d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #fff;
    padding: 12px 8px;
    min-width: 0;
}

.stat-pill .rzi[b-hgw1v68p3d] {
    font-size: 18px;
    color: #8E8E93;
}

.stat-pill.weight .rzi[b-hgw1v68p3d] {
    color: #FF9F0A;
}

.stat-pill.sessions .rzi[b-hgw1v68p3d] {
    color: #34C759;
}

.stat-content[b-hgw1v68p3d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    width: 100%;
}

.stat-value[b-hgw1v68p3d] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1C1C1E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stat-label[b-hgw1v68p3d] {
    font-size: 0.75rem;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Weight percentage display */
.stat-label.weight-percent[b-hgw1v68p3d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: inherit;
}

.percent-status[b-hgw1v68p3d] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: none;
}

.percent-value[b-hgw1v68p3d] {
    font-size: 0.7rem;
    font-weight: 600;
}

/* Weight status colors */
.stat-pill.weight-safe .percent-status[b-hgw1v68p3d] {
    background: #D1FAE5;
    color: #059669;
}

.stat-pill.weight-safe .percent-value[b-hgw1v68p3d] {
    color: #22C55E;
}

.stat-pill.weight-warning .percent-status[b-hgw1v68p3d] {
    background: #FEF3C7;
    color: #D97706;
}

.stat-pill.weight-warning .percent-value[b-hgw1v68p3d] {
    color: #F59E0B;
}

.stat-pill.weight-critical .percent-status[b-hgw1v68p3d] {
    background: #FEE2E2;
    color: #DC2626;
}

.stat-pill.weight-critical .percent-value[b-hgw1v68p3d] {
    color: #EF4444;
}

/* ===== ACTION ROW ===== */
.action-row[b-hgw1v68p3d] {
    padding: 10px 12px;
    background: #fff;
}

.action-row:empty[b-hgw1v68p3d] {
    display: none;
}

.action-btn[b-hgw1v68p3d] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.action-btn .rzi[b-hgw1v68p3d] {
    font-size: 20px;
}

.action-btn:active[b-hgw1v68p3d] {
    transform: scale(0.98);
    opacity: 0.9;
}

.action-btn.start[b-hgw1v68p3d] {
    background: #34C759;
    color: white;
}

.action-btn.complete[b-hgw1v68p3d] {
    background: #007AFF;
    color: white;
}

.action-btn.cancel[b-hgw1v68p3d] {
    background: transparent;
    color: #EF4444;
    border: 1.5px solid #FECACA;
}

.action-btn.cancel:active[b-hgw1v68p3d] {
    background: #FEF2F2;
}

/* =============================================
   TABLET+ ENHANCEMENTS
   ============================================= */

@media (min-width: 480px) {
    .header-hero[b-hgw1v68p3d] {
        padding: 1.25rem;
    }
    
    .camp-title[b-hgw1v68p3d] {
        font-size: 1.5rem;
    }
    
    .countdown-num[b-hgw1v68p3d] {
        font-size: 2.5rem;
    }
    
    .countdown-box[b-hgw1v68p3d] {
        padding: 12px 20px;
        min-width: 80px;
    }
    
    .stat-pill[b-hgw1v68p3d] {
        flex-direction: row;
        gap: 8px;
        padding: 12px;
    }
    
    .stat-content[b-hgw1v68p3d] {
        align-items: flex-start;
        text-align: left;
    }
    
    .stat-value[b-hgw1v68p3d] {
        font-size: 0.8rem;
    }
    
    .stat-label[b-hgw1v68p3d] {
        font-size: 0.6rem;
    }
}

@media (min-width: 768px) {
    .camp-header[b-hgw1v68p3d] {
        border-radius: 18px;
    }
    
    .header-hero[b-hgw1v68p3d] {
        padding: 1.5rem;
    }
    
    .camp-title[b-hgw1v68p3d] {
        font-size: 1.75rem;
    }
    
    .countdown-num[b-hgw1v68p3d] {
        font-size: 3rem;
    }
    
    .stats-grid[b-hgw1v68p3d] {
        border-radius: 0 0 18px 18px;
        overflow: hidden;
    }
    
    .action-row[b-hgw1v68p3d] {
        display: flex;
        justify-content: flex-end;
        padding: 12px 16px;
    }
    
    .action-btn[b-hgw1v68p3d] {
        width: auto;
        min-width: 160px;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-hgw1v68p3d], *[b-hgw1v68p3d]::before, *[b-hgw1v68p3d]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/FightCampFeature/Components/FightCampOpponentTab.razor.rz.scp.css */
.opponent-tab[b-uxq4xydio3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empty-state[b-uxq4xydio3] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #F9FAFB;
    border-radius: 16px;
    border: 2px dashed #E5E7EB;
}

.empty-icon[b-uxq4xydio3] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: #FEE2E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i.rzi[b-uxq4xydio3] {
    font-size: 2.5rem;
    color: #EF4444;
}

.empty-state h3[b-uxq4xydio3] {
    margin: 0 0 0.5rem;
    color: #1E293B;
}

.empty-state p[b-uxq4xydio3] {
    margin: 0 0 1.5rem;
    color: #6B7280;
}

.add-btn[b-uxq4xydio3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #EF4444;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.add-btn:hover[b-uxq4xydio3] {
    background: #DC2626;
}

.opponent-header[b-uxq4xydio3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border-radius: 16px;
}

.opponent-avatar[b-uxq4xydio3] {
    width: 56px;
    height: 56px;
    background: #EF4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opponent-avatar i.rzi[b-uxq4xydio3] {
    color: white;
    font-size: 1.5rem;
}

.opponent-info[b-uxq4xydio3] {
    flex: 1;
}

.opponent-name[b-uxq4xydio3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #991B1B;
}

.fight-meta[b-uxq4xydio3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    color: #B91C1C;
}

.fight-date[b-uxq4xydio3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.edit-btn[b-uxq4xydio3] {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,0.8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.edit-btn i.rzi[b-uxq4xydio3] {
    color: #991B1B;
}

.research-section[b-uxq4xydio3], .notes-section[b-uxq4xydio3] {
    background: white;
    border-radius: 14px;
    padding: 1.25rem;
    border: 1px solid #E5E7EB;
}

.research-section h4[b-uxq4xydio3], .notes-section h4[b-uxq4xydio3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-weight: 600;
    color: #1E293B;
}

.research-links[b-uxq4xydio3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.research-link[b-uxq4xydio3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #F9FAFB;
    border-radius: 10px;
    text-decoration: none;
    color: #1E293B;
    font-weight: 500;
}

.research-link:hover[b-uxq4xydio3] {
    background: #EEF6FF;
}

.research-link span[b-uxq4xydio3] { flex: 1; }
.research-link i.rzi.arrow[b-uxq4xydio3] { color: #9CA3AF; }
.research-link.record i.rzi:first-child[b-uxq4xydio3] { color: #059669; }
.research-link.youtube i.rzi:first-child[b-uxq4xydio3] { color: #DC2626; }
.research-link.instagram i.rzi:first-child[b-uxq4xydio3] { color: #E4405F; }
.research-link.twitter i.rzi:first-child[b-uxq4xydio3] { color: #1DA1F2; }

.notes-content[b-uxq4xydio3] {
    white-space: pre-wrap;
    line-height: 1.7;
    color: #374151;
    background: #F9FAFB;
    padding: 1rem;
    border-radius: 10px;
}

.notes-empty[b-uxq4xydio3] {
    text-align: center;
    padding: 1.5rem;
    background: #F9FAFB;
    border-radius: 10px;
    color: #6B7280;
}

.notes-empty p[b-uxq4xydio3] { margin: 0 0 1rem; }

.link-btn[b-uxq4xydio3] {
    background: none;
    border: none;
    color: #70AFFB;
    font-weight: 600;
    cursor: pointer;
}

.link-btn:hover[b-uxq4xydio3] { text-decoration: underline; }
/* /Components/Pages/FightCampFeature/Components/FightCampOverviewTab.razor.rz.scp.css */
/* =============================================
   FIGHT CAMP OVERVIEW TAB - MOBILE-FIRST
   ============================================= */

.overview-tab[b-k55sogeiyj] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ===== SECTION HEADERS ===== */
.section-header[b-k55sogeiyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.overview-tab h3[b-k55sogeiyj] {
    margin: 0 0 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header h3[b-k55sogeiyj] {
    margin: 0;
}

.add-btn[b-k55sogeiyj] {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    border: none;
    background: #007AFF;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.add-btn .rzi[b-k55sogeiyj] {
    font-size: 18px;
}

.add-btn:active[b-k55sogeiyj] {
    opacity: 0.8;
}

/* ===== GOALS SECTION ===== */
.goals-section[b-k55sogeiyj] {
    background: #F2F2F7;
    border-radius: 12px;
    padding: 1rem;
}

.goals-list[b-k55sogeiyj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.goal-chip[b-k55sogeiyj] {
    --goal-color: #007AFF;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--goal-color) 15%, white);
    border: 1px solid color-mix(in srgb, var(--goal-color) 30%, transparent);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--goal-color);
}

.goal-chip .rzi[b-k55sogeiyj] {
    font-size: 16px;
}

.empty-goals[b-k55sogeiyj] {
    text-align: center;
    padding: 1rem 0;
    color: #8E8E93;
}

.empty-goals .rzi[b-k55sogeiyj] {
    font-size: 32px;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.empty-goals p[b-k55sogeiyj] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.link-btn[b-k55sogeiyj] {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-btn:active[b-k55sogeiyj] {
    opacity: 0.7;
}

/* ===== DATES + STATS SIDE BY SIDE ===== */
.dates-stats-row[b-k55sogeiyj] {
    display: flex;
    gap: 12px;
    background: #F2F2F7;
    border-radius: 12px;
    padding: 1rem;
}

.dates-column[b-k55sogeiyj] {
    flex: 1;
    min-width: 0;
}

.dates-column h3[b-k55sogeiyj] {
    margin-bottom: 0.5rem;
}

/* Compact Timeline */
.timeline-compact[b-k55sogeiyj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-row[b-k55sogeiyj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.timeline-row .timeline-dot[b-k55sogeiyj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C7C7CC;
    flex-shrink: 0;
}

.timeline-row.passed .timeline-dot[b-k55sogeiyj] {
    background: #34C759;
}

.timeline-row .timeline-dot.weight[b-k55sogeiyj] {
    background: #FF9F0A;
}

.timeline-row .timeline-dot.fight[b-k55sogeiyj] {
    background: #FF453A;
}

.timeline-row .timeline-dot.end[b-k55sogeiyj] {
    background: #007AFF;
}

.timeline-row .timeline-label[b-k55sogeiyj] {
    flex: 1;
    color: #1C1C1E;
    font-weight: 500;
}

.timeline-row.passed .timeline-label[b-k55sogeiyj] {
    color: #8E8E93;
}

.timeline-row .timeline-date[b-k55sogeiyj] {
    color: #8E8E93;
    font-weight: 500;
    white-space: nowrap;
}

/* Stats Column - 2x2 Grid */
.stats-column[b-k55sogeiyj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    flex: 1;
}

.stat-box[b-k55sogeiyj] {
    background: #fff;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}

.stat-box.highlight[b-k55sogeiyj] {
    background: #34C759;
}

.stat-box.highlight .stat-num[b-k55sogeiyj],
.stat-box.highlight .stat-label[b-k55sogeiyj] {
    color: white;
}

.stat-num[b-k55sogeiyj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1C1C1E;
    line-height: 1;
}

.stat-label[b-k55sogeiyj] {
    font-size: 0.55rem;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

/* ===== DESCRIPTION ===== */
.description-section p[b-k55sogeiyj] {
    margin: 0;
    font-size: 0.9rem;
    color: #3C3C43;
    line-height: 1.5;
}

/* ===== EVENT SECTION ===== */
.event-card[b-k55sogeiyj] {
    display: flex;
    gap: 12px;
    background: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%);
    border-radius: 14px;
    padding: 1rem;
    color: white;
}

.event-icon[b-k55sogeiyj] {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-icon .rzi[b-k55sogeiyj] {
    font-size: 24px;
    color: #FFD60A;
}

.event-details[b-k55sogeiyj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.event-name[b-k55sogeiyj] {
    font-size: 1rem;
    font-weight: 700;
}

.event-date[b-k55sogeiyj] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.event-location[b-k55sogeiyj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 4px;
}

.event-location .rzi[b-k55sogeiyj] {
    font-size: 14px;
}

/* ===== CTA SECTION ===== */
.cta-card[b-k55sogeiyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    color: white;
}

.cta-card > .rzi[b-k55sogeiyj] {
    font-size: 40px;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.cta-content h4[b-k55sogeiyj] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.cta-content p[b-k55sogeiyj] {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85;
    line-height: 1.4;
}

.cta-btn[b-k55sogeiyj] {
    margin-top: 1rem;
    background: white;
    color: #007AFF;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cta-btn:active[b-k55sogeiyj] {
    opacity: 0.9;
    transform: scale(0.98);
}

/* =============================================
   TABLET+ ENHANCEMENTS
   ============================================= */

@media (min-width: 480px) {
    .overview-tab[b-k55sogeiyj] {
        padding: 1.25rem;
        gap: 1.5rem;
    }
    
    .stat-num[b-k55sogeiyj] {
        font-size: 1.5rem;
    }
    
    .stat-label[b-k55sogeiyj] {
        font-size: 0.6rem;
    }
    
    .timeline-row[b-k55sogeiyj] {
        font-size: 0.8rem;
    }
    
    .cta-card[b-k55sogeiyj] {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }
    
    .cta-card > .rzi[b-k55sogeiyj] {
        font-size: 36px;
        margin-bottom: 0;
    }
    
    .cta-content[b-k55sogeiyj] {
        flex: 1;
    }
    
    .cta-btn[b-k55sogeiyj] {
        margin-top: 0;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .overview-tab[b-k55sogeiyj] {
        padding: 1.5rem;
    }
    
    .dates-stats-row[b-k55sogeiyj] {
        padding: 1.25rem;
    }
    
    .stats-column[b-k55sogeiyj] {
        gap: 10px;
    }
    
    .stat-box[b-k55sogeiyj] {
        padding: 14px 10px;
    }
    
    .stat-num[b-k55sogeiyj] {
        font-size: 1.75rem;
    }
    
    .stat-label[b-k55sogeiyj] {
        font-size: 0.65rem;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-k55sogeiyj] {
        transition: none !important;
    }
}
/* /Components/Pages/FightCampFeature/Components/FightCampProgress.razor.rz.scp.css */
.progress-section[b-5awpakwp01] {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
}

.progress-section h3[b-5awpakwp01] {
    margin: 0 0 1rem;
    font-weight: 600;
}

.progress-stats[b-5awpakwp01] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card[b-5awpakwp01] {
    text-align: center;
    padding: 1rem;
    background: #F9FAFB;
    border-radius: 12px;
}

.stat-card .stat-value[b-5awpakwp01] {
    font-size: 2rem;
    font-weight: 700;
    color: #70AFFB;
}

.stat-card .stat-label[b-5awpakwp01] {
    font-size: 0.85rem;
    color: #6B7280;
}

@media (max-width: 768px) {
    .progress-stats[b-5awpakwp01] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/FightCampFeature/Components/FightCampSessionsTab.razor.rz.scp.css */
.sessions-tab[b-rnzr73a5un] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tab Header with Toggle and Actions */
.tab-header[b-rnzr73a5un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* View Toggle */
.view-toggle[b-rnzr73a5un] {
    display: flex;
    background: #F3F4F6;
    border-radius: 10px;
    padding: 4px;
}

.view-btn[b-rnzr73a5un] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
}

.view-btn.active[b-rnzr73a5un] {
    background: white;
    color: #1E293B;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.view-btn i.rzi[b-rnzr73a5un] { font-size: 1.1rem; }

/* Template Button */
.template-btn[b-rnzr73a5un] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid #E2E8F0;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #92400E;
    cursor: pointer;
    transition: all 0.2s;
}

.template-btn:hover[b-rnzr73a5un] {
    background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.template-btn i.rzi[b-rnzr73a5un] {
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    .tab-header[b-rnzr73a5un] {
        flex-direction: column;
    }
    
    .template-btn[b-rnzr73a5un] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/FightCampFeature/Components/SessionScheduleDialog.razor.rz.scp.css */
.schedule-dialog[b-d1zp7fu2pr] {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 1rem;
}

/* Mode Toggle */
.mode-toggle[b-d1zp7fu2pr] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 4px;
    background: #F1F5F9;
    border-radius: 12px;
}

.mode-btn[b-d1zp7fu2pr] {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.mode-btn:hover[b-d1zp7fu2pr] {
    background: #E2E8F0;
    color: #475569;
}

.mode-btn.active[b-d1zp7fu2pr] {
    background: #FFFFFF;
    color: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mode-btn i[b-d1zp7fu2pr] {
    font-size: 18px;
}

/* Quick Select Section */
.quick-select-section[b-d1zp7fu2pr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-select-section > label[b-d1zp7fu2pr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.training-class-grid[b-d1zp7fu2pr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
    padding: 2px;
}

.training-class-card[b-d1zp7fu2pr] {
    background: #F8FAFC;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.training-class-card:hover[b-d1zp7fu2pr] {
    border-color: #CBD5E1;
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.training-class-card.selected[b-d1zp7fu2pr] {
    border-color: #70AFFB;
    background: #F0F9FF;
    box-shadow: 0 0 0 3px rgba(112, 175, 251, 0.2);
}

.tc-header[b-d1zp7fu2pr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.tc-type-badge[b-d1zp7fu2pr] {
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.tc-time[b-d1zp7fu2pr] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

.tc-name[b-d1zp7fu2pr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.tc-sport[b-d1zp7fu2pr] {
    font-size: 0.75rem;
    color: #64748B;
    margin-bottom: 0.25rem;
}

.tc-duration[b-d1zp7fu2pr] {
    font-size: 0.75rem;
    color: #94A3B8;
}

.quick-override-section[b-d1zp7fu2pr] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #E2E8F0;
}

.dialog-body[b-d1zp7fu2pr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-d1zp7fu2pr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-d1zp7fu2pr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-group input[b-d1zp7fu2pr],
.form-group select[b-d1zp7fu2pr] {
    padding: 0.75rem 1rem;
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-size: 1rem;
    color: #1E293B;
    background: #F8FAFC;
    transition: all 0.2s;
    box-sizing: border-box;
    width: 100%;
}

.form-group input:focus[b-d1zp7fu2pr],
.form-group select:focus[b-d1zp7fu2pr] {
    outline: none;
    border-color: #70AFFB;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(112, 175, 251, 0.15);
}

.form-group input:disabled[b-d1zp7fu2pr],
.form-group select:disabled[b-d1zp7fu2pr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-group input[b-d1zp7fu2pr]::placeholder {
    color: #94A3B8;
}

.form-row[b-d1zp7fu2pr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.dialog-footer[b-d1zp7fu2pr] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #E2E8F0;
}

.cancel-btn[b-d1zp7fu2pr],
.save-btn[b-d1zp7fu2pr],
.delete-btn[b-d1zp7fu2pr] {
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s;
    border: none;
}

.cancel-btn[b-d1zp7fu2pr] {
    flex: 1;
    background: #F1F5F9;
    color: #475569;
}

.cancel-btn:hover:not(:disabled)[b-d1zp7fu2pr] {
    background: #E2E8F0;
}

.cancel-btn:disabled[b-d1zp7fu2pr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.save-btn[b-d1zp7fu2pr] {
    flex: 2;
    background: linear-gradient(135deg, #70AFFB 0%, #5A9FEB 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(112, 175, 251, 0.3);
}

.save-btn:hover:not(:disabled)[b-d1zp7fu2pr] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(112, 175, 251, 0.4);
}

.save-btn:disabled[b-d1zp7fu2pr] {
    background: #CBD5E1;
    color: #94A3B8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.save-btn i[b-d1zp7fu2pr],
.delete-btn i[b-d1zp7fu2pr] {
    font-size: 20px;
}

.delete-btn[b-d1zp7fu2pr] {
    background: #FEE2E2;
    color: #DC2626;
}

.delete-btn:hover:not(:disabled)[b-d1zp7fu2pr] {
    background: #FECACA;
}

.delete-btn:disabled[b-d1zp7fu2pr] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner */
.btn-spinner[b-d1zp7fu2pr] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-d1zp7fu2pr 0.8s linear infinite;
}

.delete-btn .btn-spinner[b-d1zp7fu2pr] {
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-top-color: #DC2626;
}

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

/* Mobile responsive */
@media (max-width: 480px) {
    .form-row[b-d1zp7fu2pr] {
        grid-template-columns: 1fr;
    }
    
    .cancel-btn[b-d1zp7fu2pr],
    .save-btn[b-d1zp7fu2pr],
    .delete-btn[b-d1zp7fu2pr] {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .training-class-grid[b-d1zp7fu2pr] {
        grid-template-columns: 1fr 1fr;
    }
    
    .mode-btn[b-d1zp7fu2pr] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/FightCampFeature/Components/SessionScheduleGrid.razor.rz.scp.css */
.schedule-builder[b-pz1jerkww1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: auto;
}

/* Grid Header - Time Slots */
.schedule-grid-header[b-pz1jerkww1] {
    display: grid;
    grid-template-columns: 50px repeat(3, minmax(80px, 1fr));
    gap: 4px;
    min-width: 320px;
}

.day-label-header[b-pz1jerkww1] {
    /* Empty corner cell */
}

.time-header[b-pz1jerkww1] {
    padding: 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: #4B5563;
    text-transform: uppercase;
    background: #E5E7EB;
    border-radius: 8px;
}

/* Day Rows */
.day-row[b-pz1jerkww1] {
    display: grid;
    grid-template-columns: 50px repeat(3, minmax(80px, 1fr));
    gap: 4px;
    min-width: 320px;
}

.day-label[b-pz1jerkww1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: #E5E7EB;
    border-radius: 8px;
}

.day-name[b-pz1jerkww1] {
    font-weight: 700;
    font-size: 0.7rem;
    color: #374151;
    text-transform: uppercase;
}

/* Time Cells */
.time-cell[b-pz1jerkww1] {
    background: #F9FAFB;
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px dashed transparent;
    overflow: hidden;
}

.time-cell:hover[b-pz1jerkww1] {
    background: #EEF6FF;
    border-color: #70AFFB;
}

.time-cell.has-session[b-pz1jerkww1] {
    background: white;
    border: 1px solid #E5E7EB;
}

.time-cell.has-session:hover[b-pz1jerkww1] {
    border-color: #70AFFB;
}

.add-hint[b-pz1jerkww1] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.time-cell:hover .add-hint[b-pz1jerkww1] { opacity: 0.4; }

.add-hint i.rzi[b-pz1jerkww1] {
    font-size: 1.25rem;
    color: #70AFFB;
}

/* Session Chip */
.session-chip[b-pz1jerkww1] {
    padding: 0.5rem;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: transform 0.1s;
    overflow: hidden;
}

.session-chip:hover[b-pz1jerkww1] { transform: scale(1.02); }
.session-chip:active[b-pz1jerkww1] { transform: scale(0.98); }

.chip-type[b-pz1jerkww1] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chip-title[b-pz1jerkww1] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1E293B;
    margin-top: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
}

.chip-recurrence[b-pz1jerkww1] {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    background: #F3F4F6;
    border-radius: 4px;
    font-size: 0.55rem;
    color: #6B7280;
    font-weight: 600;
}

/* Footer */
.schedule-footer[b-pz1jerkww1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #F9FAFB;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schedule-stats[b-pz1jerkww1] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-item[b-pz1jerkww1] {
    font-size: 0.8rem;
    color: #6B7280;
}

.stat-item strong[b-pz1jerkww1] {
    color: #1E293B;
}

.legend[b-pz1jerkww1] {
    display: flex;
    gap: 6px;
}

.legend-dot[b-pz1jerkww1] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot-color);
}

/* Blocks Timeline */
.blocks-section[b-pz1jerkww1] {
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}

.blocks-section h4[b-pz1jerkww1] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
}

.blocks-timeline[b-pz1jerkww1] {
    position: relative;
    height: 28px;
    background: #F3F4F6;
    border-radius: 6px;
    overflow: hidden;
}

.block-bar[b-pz1jerkww1] {
    position: absolute;
    top: 4px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 0.6rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .schedule-grid-header[b-pz1jerkww1],
    .day-row[b-pz1jerkww1] {
        grid-template-columns: 42px repeat(3, minmax(70px, 1fr));
        gap: 3px;
    }
    
    .time-header[b-pz1jerkww1] { 
        font-size: 0.6rem; 
        padding: 0.35rem 0.25rem;
        font-weight: 700;
        color: #374151;
    }
    
    .day-label[b-pz1jerkww1] {
        padding: 0.35rem;
    }
    
    .day-name[b-pz1jerkww1] { 
        font-size: 0.6rem;
        font-weight: 700;
    }
    
    .time-cell[b-pz1jerkww1] { 
        min-height: 50px; 
        padding: 0.35rem;
    }
    
    .session-chip[b-pz1jerkww1] { 
        padding: 0.35rem;
    }
    
    .chip-type[b-pz1jerkww1] { 
        font-size: 0.5rem;
    }
    
    .chip-title[b-pz1jerkww1] { 
        font-size: 0.65rem;
        max-height: 2.6em;
    }
    
    .chip-recurrence[b-pz1jerkww1] { 
        display: none; 
    }

    .schedule-footer[b-pz1jerkww1] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/FightCampFeature/Components/SessionWeeklyList.razor.rz.scp.css */
.sessions-list[b-7ltp80j8k9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empty-state[b-7ltp80j8k9] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #F9FAFB;
    border-radius: 16px;
}

.empty-icon[b-7ltp80j8k9] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: #EEF6FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i.rzi[b-7ltp80j8k9] { font-size: 2.5rem; color: #70AFFB; }
.empty-state h3[b-7ltp80j8k9] { margin: 0 0 0.5rem; color: #1E293B; }
.empty-state p[b-7ltp80j8k9] { margin: 0 0 1.5rem; color: #6B7280; }

.primary-btn[b-7ltp80j8k9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: #70AFFB;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Stats Bar */
.stats-bar[b-7ltp80j8k9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #F9FAFB;
    border-radius: 14px;
}

.stat[b-7ltp80j8k9] { display: flex; flex-direction: column; align-items: center; flex: 1; }
.stat-num[b-7ltp80j8k9] { font-size: 1.5rem; font-weight: 700; color: #1E293B; }
.stat-label[b-7ltp80j8k9] { font-size: 0.7rem; color: #6B7280; text-transform: uppercase; }
.stat-divider[b-7ltp80j8k9] { width: 1px; height: 30px; background: #E5E7EB; }
.rest-stat .stat-num[b-7ltp80j8k9] { color: #10B981; }

.progress-ring[b-7ltp80j8k9] { position: relative; width: 50px; height: 50px; }
.progress-ring svg[b-7ltp80j8k9] { width: 50px; height: 50px; transform: rotate(-90deg); }
.ring-bg[b-7ltp80j8k9] { fill: none; stroke: #E5E7EB; stroke-width: 3; }
.ring-fill[b-7ltp80j8k9] { fill: none; stroke: #34C759; stroke-width: 3; stroke-linecap: round; }
.ring-text[b-7ltp80j8k9] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.65rem; font-weight: 700; }

/* Filter Bar */
.filter-bar[b-7ltp80j8k9] { display: flex; align-items: center; gap: 0.5rem; }
.filter-tabs[b-7ltp80j8k9] { display: flex; flex: 1; gap: 0.25rem; background: #F3F4F6; padding: 4px; border-radius: 10px; }
.filter-tab[b-7ltp80j8k9] { flex: 1; padding: 0.5rem; border: none; background: transparent; border-radius: 8px; font-size: 0.8rem; font-weight: 500; color: #6B7280; cursor: pointer; }
.filter-tab.active[b-7ltp80j8k9] { background: white; color: #1E293B; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Weeks List */
.weeks-list[b-7ltp80j8k9] { display: flex; flex-direction: column; gap: 0.75rem; }
.week-group[b-7ltp80j8k9] { background: white; border-radius: 14px; border: 1px solid #E5E7EB; overflow: hidden; }
.week-group.current-week[b-7ltp80j8k9] { border-color: #70AFFB; box-shadow: 0 0 0 2px rgba(112, 175, 251, 0.2); }

.week-header[b-7ltp80j8k9] { display: flex; align-items: center; justify-content: space-between; padding: 1rem; cursor: pointer; }
.week-info[b-7ltp80j8k9] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.current-badge[b-7ltp80j8k9] { padding: 2px 6px; background: #70AFFB; color: white; border-radius: 4px; font-size: 0.6rem; font-weight: 700; }
.week-title[b-7ltp80j8k9] { font-weight: 700; color: #1E293B; }
.week-dates[b-7ltp80j8k9] { font-size: 0.8rem; color: #6B7280; }
.week-progress[b-7ltp80j8k9] { display: flex; align-items: center; gap: 0.5rem; }
.week-count[b-7ltp80j8k9] { font-size: 0.85rem; font-weight: 600; color: #6B7280; }

.week-sessions[b-7ltp80j8k9] { border-top: 1px solid #E5E7EB; }

/* Day Group Styles */
.day-group[b-7ltp80j8k9] {
    border-bottom: 1px solid #E5E7EB;
}

.day-group:last-child[b-7ltp80j8k9] {
    border-bottom: none;
}

.day-group.today[b-7ltp80j8k9] {
    background: linear-gradient(135deg, #EEF6FF 0%, #F0F9FF 100%);
}

.day-group.past[b-7ltp80j8k9] {
    opacity: 0.85;
}

.day-header[b-7ltp80j8k9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
}

.day-group.today .day-header[b-7ltp80j8k9] {
    background: linear-gradient(135deg, #DBEAFE 0%, #E0F2FE 100%);
    border-bottom-color: #BAE6FD;
}

.day-name[b-7ltp80j8k9] {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1E293B;
}

.day-date[b-7ltp80j8k9] {
    font-size: 0.75rem;
    color: #6B7280;
}

.today-badge[b-7ltp80j8k9] {
    padding: 2px 8px;
    background: #3B82F6;
    color: white;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 0.25rem;
}

.day-count[b-7ltp80j8k9] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9CA3AF;
}

.day-sessions[b-7ltp80j8k9] {
    display: flex;
    flex-direction: column;
}

/* Session Card Styles */
.session-card[b-7ltp80j8k9] { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid #F3F4F6; }
.session-card:last-child[b-7ltp80j8k9] { border-bottom: none; }
.session-card.completed[b-7ltp80j8k9] { opacity: 0.6; }
.session-card.overdue[b-7ltp80j8k9] { background: #FEF2F2; }
.session-card.passive[b-7ltp80j8k9] { background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%); }

.check-btn[b-7ltp80j8k9] { width: 32px; height: 32px; border: none; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check-btn i.rzi[b-7ltp80j8k9] { font-size: 1.5rem; color: #D1D5DB; }
.check-btn.checked i.rzi[b-7ltp80j8k9] { color: #34C759; }
.check-btn.passive-check[b-7ltp80j8k9] { cursor: default; }
.check-btn.passive-check i.rzi[b-7ltp80j8k9] { color: #10B981; font-size: 1.25rem; }

.session-content[b-7ltp80j8k9] { flex: 1; min-width: 0; cursor: pointer; }

.session-time[b-7ltp80j8k9] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 2px;
    min-height: 14px;
}

.session-time:empty[b-7ltp80j8k9] {
    display: none;
}

.session-main[b-7ltp80j8k9] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.session-type[b-7ltp80j8k9] { padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.type-training[b-7ltp80j8k9] { background: #EEF6FF; color: #70AFFB; }
.type-sparring[b-7ltp80j8k9] { background: #FCE7F3; color: #EC4899; }
.type-strength[b-7ltp80j8k9] { background: #FEE2E2; color: #EF4444; }
.type-technical[b-7ltp80j8k9] { background: #EDE9FE; color: #8B5CF6; }
.type-recovery[b-7ltp80j8k9] { background: #D1FAE5; color: #10B981; }
.type-rest[b-7ltp80j8k9] { background: #F3F4F6; color: #6B7280; }

.session-title[b-7ltp80j8k9] { font-weight: 500; color: #1E293B; font-size: 0.9rem; }

.auto-badge[b-7ltp80j8k9] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #059669;
    background: #D1FAE5;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.choose-badge[b-7ltp80j8k9] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #7C3AED;
    background: #EDE9FE;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}
/* /Components/Pages/FightCampFeature/Pages/FightCampCreate.razor.rz.scp.css */
.create-camp-page[b-rmdoz0velh] {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 2rem;
}

/* ===== HEADER ===== */
.editor-header[b-rmdoz0velh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E2E8F0;
}

.back-btn[b-rmdoz0velh] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: #F1F5F9;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.back-btn:hover[b-rmdoz0velh] {
    background: #E2E8F0;
    color: #1E293B;
}

.back-btn i[b-rmdoz0velh] {
    font-size: 24px;
}

.header-text h1[b-rmdoz0velh] {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.header-text p[b-rmdoz0velh] {
    margin: 0;
    font-size: 0.9rem;
    color: #64748B;
}

/* ===== EDITOR CARDS ===== */
.camp-editor[b-rmdoz0velh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editor-card[b-rmdoz0velh] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid #E2E8F0;
    position: relative;
}

.editor-card h3[b-rmdoz0velh] {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
}

.card-icon[b-rmdoz0velh] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    background: #EFF6FF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon i[b-rmdoz0velh] {
    color: #3B82F6;
    font-size: 20px;
}

.card-icon.opponent[b-rmdoz0velh] {
    background: #FEF2F2;
}

.card-icon.opponent i[b-rmdoz0velh] {
    color: #EF4444;
}

.card-subtitle[b-rmdoz0velh] {
    color: #64748B;
    font-size: 0.9rem;
    margin: -0.5rem 0 1rem;
}

/* ===== INPUTS ===== */
.input-group[b-rmdoz0velh] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.input-group:last-child[b-rmdoz0velh] {
    margin-bottom: 0;
}

.input-group > label[b-rmdoz0velh] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1E293B;
    font-size: 0.875rem;
    line-height: 1.2;
}

.input-row[b-rmdoz0velh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0; /* Remove default margin, let input-groups handle it */
}

/* Ensure input groups within rows have consistent bottom margin */
.input-row > .input-group[b-rmdoz0velh] {
    margin-bottom: 1rem;
}

/* Override Radzen's default styling for consistent appearance */
.input-group[b-rmdoz0velh]  .rz-dropdown,
.input-group[b-rmdoz0velh]  .rz-textbox,
.input-group[b-rmdoz0velh]  .rz-datepicker,
.input-group[b-rmdoz0velh]  .rz-spinner {
    width: 100% !important;
    min-height: 44px;
}

/* Ensure consistent input heights */
.editor-card[b-rmdoz0velh]  .rz-textbox,
.editor-card[b-rmdoz0velh]  .rz-dropdown,
.editor-card[b-rmdoz0velh]  .rz-datepicker input,
.editor-card[b-rmdoz0velh]  .rz-spinner input {
    height: 44px;
  
}

.helper-text[b-rmdoz0velh] {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #64748B;
}

.warning-banner[b-rmdoz0velh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #FEF3C7;
    border-radius: 12px;
    border: 1px solid #FCD34D;
    color: #92400E;
    font-size: 0.9rem;
}

.warning-banner i[b-rmdoz0velh] {
    font-size: 20px;
    flex-shrink: 0;
}

/* ===== GOALS ===== */
.goals-grid[b-rmdoz0velh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.goal-chip[b-rmdoz0velh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 2px solid #E2E8F0;
    background: white;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: all 0.2s;
}

.goal-chip:hover[b-rmdoz0velh] {
    border-color: #3B82F6;
    background: #F0F9FF;
}

.goal-chip.selected[b-rmdoz0velh] {
    border-color: var(--goal-color, #3B82F6);
    background: color-mix(in srgb, var(--goal-color, #3B82F6) 10%, white);
    color: var(--goal-color, #3B82F6);
}

.goal-chip i[b-rmdoz0velh] {
    font-size: 18px;
}

.goal-chip i.check[b-rmdoz0velh] {
    font-size: 16px;
    margin-left: 0.25rem;
}

/* ===== SOCIAL INPUTS ===== */
.social-section[b-rmdoz0velh] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E2E8F0;
}

.social-section h4[b-rmdoz0velh] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
}

.social-input[b-rmdoz0velh] {
    display: flex;
    align-items: stretch;
    margin-bottom: 0.75rem;
}

.social-input:last-child[b-rmdoz0velh] {
    margin-bottom: 0;
}

.social-icon[b-rmdoz0velh] {
    width: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-right: none;
    border-radius: 8px 0 0 8px;
}

.social-icon i[b-rmdoz0velh] {
    font-size: 20px;
}

.social-icon.instagram i[b-rmdoz0velh] { color: #E4405F; }
.social-icon.twitter i[b-rmdoz0velh] { color: #1DA1F2; }
.social-icon.youtube i[b-rmdoz0velh] { color: #FF0000; }
.social-icon.record i[b-rmdoz0velh] { color: #1E293B; }

.social-input .rz-textbox[b-rmdoz0velh] {
    border-radius: 0 8px 8px 0 !important;
}

/* ===== ACTION BAR ===== */
.action-bar[b-rmdoz0velh] {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 0 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #E2E8F0;
}

.btn-secondary[b-rmdoz0velh],
.btn-primary[b-rmdoz0velh] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary[b-rmdoz0velh] {
    background: #F1F5F9;
    color: #475569;
}

.btn-secondary:hover[b-rmdoz0velh] {
    background: #E2E8F0;
}

.btn-primary[b-rmdoz0velh] {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover:not(:disabled)[b-rmdoz0velh] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled[b-rmdoz0velh] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-primary i[b-rmdoz0velh] {
    font-size: 20px;
}

.spinner[b-rmdoz0velh] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-rmdoz0velh 0.8s linear infinite;
}

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

/* ===== LOCATION AUTOCOMPLETE ===== */
.location-autocomplete[b-rmdoz0velh] {
    position: relative;
}

.location-input[b-rmdoz0velh] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 1rem;
    color: #1E293B;
    background: white;
    transition: all 0.2s;
    box-sizing: border-box;
}

.location-input:focus[b-rmdoz0velh] {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.location-input[b-rmdoz0velh]::placeholder {
    color: #94A3B8;
}

.location-loading[b-rmdoz0velh] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 14px; /* account for label */
}

.mini-spinner[b-rmdoz0velh] {
    width: 18px;
    height: 18px;
    border: 2px solid #E2E8F0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin-b-rmdoz0velh 0.8s linear infinite;
}

.autocomplete-dropdown[b-rmdoz0velh] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.autocomplete-item[b-rmdoz0velh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    color: #1E293B;
    font-size: 0.95rem;
}

.autocomplete-item:hover[b-rmdoz0velh] {
    background: #F1F5F9;
}

.autocomplete-item:first-child[b-rmdoz0velh] {
    border-radius: 12px 12px 0 0;
}

.autocomplete-item:last-child[b-rmdoz0velh] {
    border-radius: 0 0 12px 12px;
}

.autocomplete-item:only-child[b-rmdoz0velh] {
    border-radius: 12px;
}

.autocomplete-item i[b-rmdoz0velh] {
    color: #3B82F6;
    font-size: 18px;
    flex-shrink: 0;
}

.autocomplete-item span[b-rmdoz0velh] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== FIGHTER DISPLAY (Edit Mode) ===== */
.fighter-display[b-rmdoz0velh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #F1F5F9;
    border-radius: 10px;
}

.fighter-avatar-small[b-rmdoz0velh] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.fighter-name-display[b-rmdoz0velh] {
    font-weight: 600;
    color: #1E293B;
    font-size: 1rem;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
    .create-camp-page[b-rmdoz0velh] {
        padding: 0.75rem;
        padding-bottom: 1.5rem;
    }

    .editor-header[b-rmdoz0velh] {
        margin-bottom: 1rem;
    }

    .header-text h1[b-rmdoz0velh] {
        font-size: 1.25rem;
    }

    .editor-card[b-rmdoz0velh] {
        padding: 1rem;
        border-radius: 14px;
    }

    .card-icon[b-rmdoz0velh] {
        width: 36px;
        height: 36px;
        top: 1rem;
        right: 1rem;
    }

    .card-icon i[b-rmdoz0velh] {
        font-size: 18px;
    }

    .input-row[b-rmdoz0velh] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .goal-chip[b-rmdoz0velh] {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }

    .action-bar[b-rmdoz0velh] {
        padding: 0.875rem;
    }

    .btn-secondary[b-rmdoz0velh],
    .btn-primary[b-rmdoz0velh] {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}
/* /Components/Pages/FightCampFeature/Pages/FightCampDetail.razor.rz.scp.css */
/* =============================================
   FIGHT CAMP DETAIL PAGE - MOBILE-FIRST
   ============================================= */

/* Processing Overlay */
.processing-overlay[b-sh06a116k0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.processing-content[b-sh06a116k0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.processing-spinner[b-sh06a116k0] {
    width: 48px;
    height: 48px;
    border: 4px solid #E2E8F0;
    border-top-color: #70AFFB;
    border-radius: 50%;
    animation: spin-b-sh06a116k0 0.8s linear infinite;
}

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

.processing-content span[b-sh06a116k0] {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.fight-camp-page[b-sh06a116k0] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* ===== MODERN SEGMENTED TAB BAR ===== */
.tab-bar[b-sh06a116k0] {
    display: flex;
    background: rgba(120, 120, 128, 0.12);
    border-radius: 10px;
    padding: 2px;
    margin: 0.5rem 0;
}

.tab[b-sh06a116k0] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.tab .rzi[b-sh06a116k0] {
    font-size: 18px;
    color: #8E8E93;
    transition: color 0.2s;
}

.tab span:not(.tab-badge)[b-sh06a116k0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8E8E93;
    transition: color 0.2s;
}

.tab:active[b-sh06a116k0] {
    opacity: 0.7;
}

/* Active Tab - Clean white card */
.tab.active[b-sh06a116k0] {
    background: #fff;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.tab.active .rzi[b-sh06a116k0] {
    color: #007AFF;
}

.tab.active span:not(.tab-badge)[b-sh06a116k0] {
    color: #1C1C1E;
}

/* Badge */
.tab-badge[b-sh06a116k0] {
    background: #34C759;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1.2;
}

.tab.active .tab-badge[b-sh06a116k0] {
    background: #007AFF;
}

/* ===== TAB CONTENT ===== */
.tab-content[b-sh06a116k0] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 200px;
    overflow: hidden;
}

/* ===== ERROR STATE ===== */
.error-state[b-sh06a116k0] {
    text-align: center;
    padding: 2rem 1rem;
    background: #FEF2F2;
    border-radius: 12px;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.error-state .error-icon[b-sh06a116k0] {
    font-size: 40px;
    margin-bottom: 0.75rem;
    color: #DC2626;
}

.error-state .error-icon .rzi[b-sh06a116k0] {
    font-size: inherit;
}

.error-state h3[b-sh06a116k0] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.error-state p[b-sh06a116k0] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.btn-primary[b-sh06a116k0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:active[b-sh06a116k0] {
    transform: scale(0.97);
    opacity: 0.9;
}

/* =============================================
   TABLET+ ENHANCEMENTS
   ============================================= */

@media (min-width: 480px) {
    .tab[b-sh06a116k0] {
        padding: 10px 16px;
        gap: 8px;
    }
    
    .tab .rzi[b-sh06a116k0] {
        font-size: 20px;
    }
    
    .tab span:not(.tab-badge)[b-sh06a116k0] {
        font-size: 0.875rem;
    }
}

@media (min-width: 768px) {
    .fight-camp-page[b-sh06a116k0] {
        padding: 0.5rem;
    }
    
    .tab-bar[b-sh06a116k0] {
        max-width: 420px;
        border-radius: 12px;
        padding: 3px;
        margin: 0.75rem 0;
    }
    
    .tab[b-sh06a116k0] {
        border-radius: 10px;
        padding: 12px 20px;
    }
    
    .tab-content[b-sh06a116k0] {
        border-radius: 16px;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .tab[b-sh06a116k0] {
        transition: none;
    }
}
/* /Components/Pages/FighterFeature/Components/DailyTrainingDialog.razor.rz.scp.css */
.training-log-dialog[b-r1cdptqd49] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
}

/* Header - Purple/Training theme */
.dialog-header[b-r1cdptqd49] {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
    color: white;
    padding: 1rem 1.25rem 1.5rem;
    text-align: center;
    z-index: 10;
}

.close-btn[b-r1cdptqd49] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:active[b-r1cdptqd49] {
    background: rgba(255,255,255,0.3);
}

.header-icon[b-r1cdptqd49] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.dialog-header h2[b-r1cdptqd49] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.dialog-header p[b-r1cdptqd49] {
    margin: 0.25rem 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Scrollable Body */
.dialog-body[b-r1cdptqd49] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 140px;
    background: #F8FAFC;
}

/* Check Sections */
.check-section[b-r1cdptqd49] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-label[b-r1cdptqd49] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
}

.section-label i[b-r1cdptqd49] {
    font-size: 1.25rem;
    color: #A855F7;
}

.section-label .hint[b-r1cdptqd49] {
    font-weight: 400;
    font-size: 0.75rem;
    color: #94A3B8;
    margin-left: auto;
}

/* Date Section */
.date-section[b-r1cdptqd49] {
    background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
    border: 2px solid #A855F7;
}

.date-picker-row[b-r1cdptqd49] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-nav-btn[b-r1cdptqd49] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid #E2E8F0;
    background: white;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.date-nav-btn:hover:not(:disabled)[b-r1cdptqd49] {
    border-color: #A855F7;
    color: #A855F7;
}

.date-nav-btn:disabled[b-r1cdptqd49] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Training Type Chips */
.type-chips[b-r1cdptqd49] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.type-chip[b-r1cdptqd49] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 20px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.type-chip i[b-r1cdptqd49] {
    font-size: 1rem;
}

.type-chip.active[b-r1cdptqd49] {
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    border-color: #A855F7;
    color: white;
}

.type-chip:active[b-r1cdptqd49] {
    transform: scale(0.95);
}

/* Duration Grid */
.duration-grid[b-r1cdptqd49] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.duration-btn[b-r1cdptqd49] {
    padding: 0.65rem 0.5rem;
    border-radius: 12px;
    border: 2px solid #E2E8F0;
    background: white;
    font-weight: 600;
    font-size: 0.9rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.duration-btn.active[b-r1cdptqd49] {
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    border-color: #A855F7;
    color: white;
}

.duration-btn:active[b-r1cdptqd49] {
    transform: scale(0.95);
}

.custom-duration[b-r1cdptqd49] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #E2E8F0;
    font-size: 0.85rem;
    color: #64748B;
}

/* Session Buttons */
.session-buttons[b-r1cdptqd49] {
    display: flex;
    gap: 0.5rem;
}

.session-btn[b-r1cdptqd49] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 2px solid #E2E8F0;
    background: white;
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.session-btn.active[b-r1cdptqd49] {
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    border-color: #A855F7;
    color: white;
}

.session-btn:active[b-r1cdptqd49] {
    transform: scale(0.95);
}

/* Intensity Pills */
.intensity-pills[b-r1cdptqd49] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.intensity-pill[b-r1cdptqd49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.65rem 0.5rem;
    border-radius: 12px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.intensity-pill i[b-r1cdptqd49] {
    font-size: 1.25rem;
}

.intensity-pill.active.light[b-r1cdptqd49] {
    background: #DCFCE7;
    border-color: #22C55E;
    color: #15803D;
}

.intensity-pill.active.moderate[b-r1cdptqd49] {
    background: #FEF3C7;
    border-color: #F59E0B;
    color: #B45309;
}

.intensity-pill.active.hard[b-r1cdptqd49] {
    background: #FED7AA;
    border-color: #F97316;
    color: #C2410C;
}

.intensity-pill.active.intense[b-r1cdptqd49] {
    background: #FECACA;
    border-color: #EF4444;
    color: #DC2626;
}

.intensity-pill:active[b-r1cdptqd49] {
    transform: scale(0.95);
}

/* Performance Feel Buttons */
.feel-buttons[b-r1cdptqd49] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
}

.feel-btn[b-r1cdptqd49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border-radius: 12px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.feel-btn i[b-r1cdptqd49] {
    font-size: 1.5rem;
}

.feel-btn.active.struggled[b-r1cdptqd49] {
    background: #FECACA;
    border-color: #EF4444;
    color: #DC2626;
}

.feel-btn.active.off[b-r1cdptqd49] {
    background: #FED7AA;
    border-color: #F97316;
    color: #C2410C;
}

.feel-btn.active.normal[b-r1cdptqd49] {
    background: #E2E8F0;
    border-color: #94A3B8;
    color: #475569;
}

.feel-btn.active.good[b-r1cdptqd49] {
    background: #BBF7D0;
    border-color: #22C55E;
    color: #15803D;
}

.feel-btn.active.great[b-r1cdptqd49] {
    background: #A7F3D0;
    border-color: #10B981;
    color: #047857;
}

.feel-btn:active[b-r1cdptqd49] {
    transform: scale(0.95);
}

/* Location Chips */
.location-chips[b-r1cdptqd49] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.location-chip[b-r1cdptqd49] {
    padding: 0.5rem 0.85rem;
    border-radius: 20px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.location-chip.active[b-r1cdptqd49] {
    background: #70AFFB;
    border-color: #70AFFB;
    color: white;
}

.location-chip:active[b-r1cdptqd49] {
    transform: scale(0.95);
}

/* Fixed Footer */
.dialog-footer[b-r1cdptqd49] {
    position: fixed;
    bottom: 85px;
    left: 0;
    right: 0;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-top: 1px solid #E0E6EB;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    z-index: 20;
}

.training-summary[b-r1cdptqd49] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
    border-radius: 12px;
    min-width: 100px;
}

.summary-icon[b-r1cdptqd49] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon i[b-r1cdptqd49] {
    font-size: 1.25rem;
}

.summary-text[b-r1cdptqd49] {
    display: flex;
    flex-direction: column;
}

.summary-duration[b-r1cdptqd49] {
    font-weight: 700;
    font-size: 1rem;
    color: #7C3AED;
    line-height: 1.1;
}

.summary-types[b-r1cdptqd49] {
    font-size: 0.7rem;
    color: #9333EA;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Radzen overrides */
:deep(.rz-datepicker)[b-r1cdptqd49] {
    width: 100%;
}

:deep(.rz-inputtext)[b-r1cdptqd49] {
    border-radius: 10px !important;
}

/* Desktop Adjustments */
@media (min-width: 600px) {
    .dialog-footer[b-r1cdptqd49] {
        position: sticky;
        bottom: 0;
        box-shadow: none;
        border-top: 1px solid #E0E6EB;
    }

    .dialog-body[b-r1cdptqd49] {
        padding-bottom: 1rem;
    }
    
    .duration-grid[b-r1cdptqd49] {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .feel-buttons[b-r1cdptqd49] {
        gap: 0.5rem;
    }
    
    .feel-btn[b-r1cdptqd49] {
        padding: 0.65rem 0.5rem;
        font-size: 0.75rem;
    }
}
/* /Components/Pages/FighterFeature/Components/SelfCheckDetailsDialog.razor.rz.scp.css */
.check-details-dialog[b-d8j1ztf7z5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 85vh;
    background: #F8FAFC;
}

/* Header */
.dialog-header[b-d8j1ztf7z5] {
    position: relative;
    padding: 1.25rem 1rem 1.5rem;
    color: white;
    text-align: center;
}

.close-btn[b-d8j1ztf7z5] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover[b-d8j1ztf7z5] {
    background: rgba(255,255,255,0.3);
}

.header-content[b-d8j1ztf7z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.header-score[b-d8j1ztf7z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-score .score-value[b-d8j1ztf7z5] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.header-score .score-label[b-d8j1ztf7z5] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.header-date[b-d8j1ztf7z5] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.header-date i[b-d8j1ztf7z5] {
    font-size: 1rem;
}

/* Body */
.dialog-body[b-d8j1ztf7z5] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Status Badges */
.status-badges[b-d8j1ztf7z5] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.status-badge[b-d8j1ztf7z5] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge i[b-d8j1ztf7z5] {
    font-size: 1rem;
}

.status-badge.compete[b-d8j1ztf7z5] {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.status-badge.train[b-d8j1ztf7z5] {
    background: rgba(34, 197, 94, 0.15);
    color: #16A34A;
}

/* Sections */
.detail-section[b-d8j1ztf7z5] {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-header[b-d8j1ztf7z5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
}

.section-header i[b-d8j1ztf7z5] {
    font-size: 1.1rem;
    color: #70AFFB;
}

/* Training Section */
.training-section[b-d8j1ztf7z5] {
    background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
    border: 1px solid #A855F7;
}

.training-section .section-header i[b-d8j1ztf7z5] {
    color: #A855F7;
}

.training-grid[b-d8j1ztf7z5] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.training-stat[b-d8j1ztf7z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.training-stat .stat-value[b-d8j1ztf7z5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7C3AED;
}

.training-stat .stat-label[b-d8j1ztf7z5] {
    font-size: 0.7rem;
    color: #6B7280;
    text-transform: uppercase;
}

.training-types[b-d8j1ztf7z5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.type-chip[b-d8j1ztf7z5] {
    background: rgba(168, 85, 247, 0.2);
    color: #7C3AED;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
}

/* Metrics Grid */
.metrics-grid[b-d8j1ztf7z5] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.metric-item[b-d8j1ztf7z5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.metric-header[b-d8j1ztf7z5] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 100px;
    font-size: 0.8rem;
    color: #64748B;
}

.metric-header i[b-d8j1ztf7z5] {
    font-size: 0.95rem;
    color: #94A3B8;
}

.metric-bar[b-d8j1ztf7z5] {
    flex: 1;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.metric-bar .bar-fill[b-d8j1ztf7z5] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.metric-value[b-d8j1ztf7z5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1E293B;
    min-width: 35px;
    text-align: right;
}

/* Sleep Section */
.sleep-section .sleep-display[b-d8j1ztf7z5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem 0;
}

.sleep-display .hours[b-d8j1ztf7z5] {
    font-size: 2rem;
    font-weight: 700;
    color: #3B82F6;
}

.sleep-display .label[b-d8j1ztf7z5] {
    font-size: 0.9rem;
    color: #64748B;
}

/* Notes Section */
.notes-section .notes-content[b-d8j1ztf7z5] {
    margin: 0;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    background: #F1F5F9;
    border-radius: 8px;
}

/* Concerns Section */
.concerns-section[b-d8j1ztf7z5] {
    border: 1px solid #FCD34D;
    background: #FFFBEB;
}

.concerns-section .section-header i[b-d8j1ztf7z5] {
    color: #F59E0B;
}

.concerns-section .concerns-content[b-d8j1ztf7z5] {
    margin: 0;
    font-size: 0.9rem;
    color: #92400E;
    line-height: 1.5;
}

/* Footer */
.dialog-footer[b-d8j1ztf7z5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-top: 1px solid #E5E7EB;
}

.timestamp[b-d8j1ztf7z5] {
    font-size: 0.75rem;
    color: #94A3B8;
}
/* /Components/Pages/FighterFeature/Components/SelfCheckDialog.razor.rz.scp.css */
.self-check-dialog[b-dn1t3cbrqi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
}

/* Header */
.dialog-header[b-dn1t3cbrqi] {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    color: white;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: center;
    z-index: 10;
    border-radius: 12px 12px 0 0;
}

.close-btn[b-dn1t3cbrqi] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

    .close-btn:active[b-dn1t3cbrqi] {
        background: rgba(255,255,255,0.3);
    }

.header-icon[b-dn1t3cbrqi] {
    font-size: 2.25rem;
    margin-bottom: 0.25rem;
}

.dialog-header h2[b-dn1t3cbrqi] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.dialog-header p[b-dn1t3cbrqi] {
    margin: 0.25rem 0 0;
    opacity: 0.9;
    font-size: 0.875rem;
}

/* Scrollable Body */
.dialog-body[b-dn1t3cbrqi] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Check Sections */
.check-section[b-dn1t3cbrqi] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border: 1px solid #F1F5F9;
}

    .check-section.highlight[b-dn1t3cbrqi] {
        background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
        border: 2px solid #5EEAD4;
    }

.section-label[b-dn1t3cbrqi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
}

    .section-label i[b-dn1t3cbrqi] {
        font-size: 1.25rem;
        color: #14B8A6;
    }

    .section-label .hint[b-dn1t3cbrqi] {
        font-weight: 400;
        font-size: 0.75rem;
        color: #94A3B8;
        margin-left: auto;
    }

/* ===== WELLNESS SELECTOR (Overall) ===== */
.wellness-selector[b-dn1t3cbrqi] {
    display: flex;
    gap: 0.4rem;
}

.wellness-btn[b-dn1t3cbrqi] {
    flex: 1;
    padding: 10px 4px;
    border-radius: 12px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

    .wellness-btn:active[b-dn1t3cbrqi] {
        transform: scale(0.95);
    }

    .wellness-btn.active.bad[b-dn1t3cbrqi] {
        background: #FEF2F2;
        border-color: #EF4444;
        color: #DC2626;
    }

    .wellness-btn.active.meh[b-dn1t3cbrqi] {
        background: #FFFBEB;
        border-color: #F59E0B;
        color: #D97706;
    }

    .wellness-btn.active.ok[b-dn1t3cbrqi] {
        background: #F0FDF4;
        border-color: #84CC16;
        color: #65A30D;
    }

    .wellness-btn.active.good[b-dn1t3cbrqi] {
        background: #ECFDF5;
        border-color: #22C55E;
        color: #16A34A;
    }

    .wellness-btn.active.great[b-dn1t3cbrqi] {
        background: #F0FDFA;
        border-color: #14B8A6;
        color: #0D9488;
    }

/* ===== SLEEP SECTION ===== */
.sleep-row[b-dn1t3cbrqi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sleep-label[b-dn1t3cbrqi],
.quality-label[b-dn1t3cbrqi] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748B;
    min-width: 52px;
}

.sleep-buttons[b-dn1t3cbrqi] {
    display: flex;
    gap: 0.35rem;
    flex: 1;
}

.sleep-btn[b-dn1t3cbrqi] {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    border: 2px solid #E2E8F0;
    background: white;
    font-weight: 600;
    font-size: 0.875rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sleep-btn.active[b-dn1t3cbrqi] {
        background: #14B8A6;
        border-color: #14B8A6;
        color: white;
    }

    .sleep-btn:active[b-dn1t3cbrqi] {
        transform: scale(0.95);
    }

.quality-row[b-dn1t3cbrqi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .quality-row .pill-selector[b-dn1t3cbrqi] {
        flex: 1;
    }

/* ===== PILL SELECTOR (Body & Mind, Fuel, Sleep Quality) ===== */
.metric-row[b-dn1t3cbrqi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

    .metric-row + .metric-row[b-dn1t3cbrqi] {
        border-top: 1px solid #F1F5F9;
    }

.metric-info[b-dn1t3cbrqi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 100px;
}

    .metric-info i[b-dn1t3cbrqi] {
        font-size: 1.1rem;
        color: #14B8A6;
    }

    .metric-info span[b-dn1t3cbrqi] {
        font-size: 0.8rem;
        font-weight: 600;
        color: #475569;
    }

.pill-selector[b-dn1t3cbrqi] {
    display: flex;
    gap: 0.3rem;
    flex: 1;
}

.pill-btn[b-dn1t3cbrqi] {
    flex: 1;
    padding: 6px 4px;
    border-radius: 8px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

    .pill-btn:active[b-dn1t3cbrqi] {
        transform: scale(0.95);
    }

    .pill-btn.active.low[b-dn1t3cbrqi] {
        background: #DCFCE7;
        border-color: #22C55E;
        color: #16A34A;
    }

    .pill-btn.active.med[b-dn1t3cbrqi] {
        background: #FEF9C3;
        border-color: #EAB308;
        color: #CA8A04;
    }

    .pill-btn.active.high[b-dn1t3cbrqi] {
        background: #FEF2F2;
        border-color: #EF4444;
        color: #DC2626;
    }

    .pill-btn.active.good[b-dn1t3cbrqi] {
        background: #DCFCE7;
        border-color: #22C55E;
        color: #16A34A;
    }

    .pill-btn.active.ok[b-dn1t3cbrqi] {
        background: #F0FDF4;
        border-color: #84CC16;
        color: #65A30D;
    }

    .pill-btn.active.meh[b-dn1t3cbrqi] {
        background: #FFFBEB;
        border-color: #F59E0B;
        color: #D97706;
    }

    .pill-btn.active.bad[b-dn1t3cbrqi] {
        background: #FEF2F2;
        border-color: #EF4444;
        color: #DC2626;
    }

    .pill-btn.active.great[b-dn1t3cbrqi] {
        background: #F0FDFA;
        border-color: #14B8A6;
        color: #0D9488;
    }

/* ===== TOGGLE SECTION ===== */
.toggle-section[b-dn1t3cbrqi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toggle-item[b-dn1t3cbrqi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #F8FAFC;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
}

    .toggle-item i[b-dn1t3cbrqi] {
        font-size: 1.5rem;
        color: #CBD5E1;
    }

    .toggle-item.active[b-dn1t3cbrqi] {
        background: #DCFCE7;
        border-color: #22C55E;
    }

        .toggle-item.active i[b-dn1t3cbrqi] {
            color: #22C55E;
        }

    .toggle-item span[b-dn1t3cbrqi] {
        font-weight: 500;
        color: #1E293B;
    }

/* ===== INJURY STATUS SECTION ===== */
.check-section.injury-warning[b-dn1t3cbrqi] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 2px solid #EF4444;
}

.injury-toggle[b-dn1t3cbrqi] {
    margin-bottom: 0;
}

.injury-toggle.healthy[b-dn1t3cbrqi] {
    background: #DCFCE7;
    border-color: #22C55E;
}

.injury-toggle.healthy i[b-dn1t3cbrqi] {
    color: #22C55E;
}

.injury-toggle.injured[b-dn1t3cbrqi] {
    background: #FEE2E2;
    border-color: #EF4444;
}

.injury-toggle.injured i[b-dn1t3cbrqi] {
    color: #EF4444;
}

.injury-note-section[b-dn1t3cbrqi] {
    margin-top: 0.75rem;
}

.injury-hint[b-dn1t3cbrqi] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #991B1B;
}

.injury-hint i[b-dn1t3cbrqi] {
    font-size: 1rem;
    color: #EF4444;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ===== TRAINING SECTION ===== */
.training-section[b-dn1t3cbrqi] {
    border: 2px solid #E2E8F0;
}

.training-section .section-label i[b-dn1t3cbrqi] {
    color: #8B5CF6;
}

.training-toggle[b-dn1t3cbrqi] {
    margin-bottom: 0;
}

.training-toggle.active[b-dn1t3cbrqi] {
    background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
    border-color: #A855F7;
}

.training-toggle.active i[b-dn1t3cbrqi] {
    color: #A855F7;
}

.training-details[b-dn1t3cbrqi] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.training-row[b-dn1t3cbrqi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.training-label[b-dn1t3cbrqi] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748B;
}

.session-buttons[b-dn1t3cbrqi] {
    display: flex;
    gap: 0.5rem;
}

.session-btn[b-dn1t3cbrqi] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid #E2E8F0;
    background: white;
    font-weight: 700;
    font-size: 1rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.session-btn.active[b-dn1t3cbrqi] {
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    border-color: #A855F7;
    color: white;
}

.session-btn:active[b-dn1t3cbrqi] {
    transform: scale(0.95);
}

.hours-buttons[b-dn1t3cbrqi] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.hour-btn[b-dn1t3cbrqi] {
    min-width: 38px;
    height: 38px;
    padding: 0 0.5rem;
    border-radius: 10px;
    border: 2px solid #E2E8F0;
    background: white;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

    .hour-btn.active[b-dn1t3cbrqi] {
        background: #8B5CF6;
        border-color: #8B5CF6;
        color: white;
    }

    .hour-btn:active[b-dn1t3cbrqi] {
        transform: scale(0.95);
    }

.type-chips[b-dn1t3cbrqi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.type-chip[b-dn1t3cbrqi] {
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    border: 2px solid #E2E8F0;
    background: white;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s;
}

.type-chip.active[b-dn1t3cbrqi] {
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    border-color: #A855F7;
    color: white;
}

.type-chip:active[b-dn1t3cbrqi] {
    transform: scale(0.95);
}

.intensity-row[b-dn1t3cbrqi] {
    flex-direction: row;
    align-items: center;
}

.intensity-slider[b-dn1t3cbrqi] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.intensity-value[b-dn1t3cbrqi] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #764BA2;
    min-width: 45px;
    text-align: right;
}

/* Footer - sticky so it doesn't cover content */
.dialog-footer[b-dn1t3cbrqi] {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-top: 1px solid #E0E6EB;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 20;
}

.wellness-score-preview[b-dn1t3cbrqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 14px;
    color: white;
    min-width: 72px;
}

.score-value[b-dn1t3cbrqi] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.score-label[b-dn1t3cbrqi] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.submit-btn[b-dn1t3cbrqi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

    .submit-btn:hover:not(:disabled)[b-dn1t3cbrqi] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
    }

    .submit-btn:disabled[b-dn1t3cbrqi] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Radzen Slider Overrides */
[b-dn1t3cbrqi] .rz-slider {
    height: 44px !important;
}

[b-dn1t3cbrqi] .rz-slider-range {
    height: 8px !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, #14B8A6, #0D9488) !important;
}

[b-dn1t3cbrqi] .rz-slider-track {
    height: 8px !important;
    border-radius: 4px !important;
    background: #E2E8F0 !important;
}

[b-dn1t3cbrqi] .rz-slider-handle {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 3px solid #14B8A6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    top: -10px !important;
}

@media (max-width: 640px) {
    .dialog-body[b-dn1t3cbrqi] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .metric-row[b-dn1t3cbrqi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .metric-info[b-dn1t3cbrqi] {
        min-width: auto;
    }

    .pill-selector[b-dn1t3cbrqi] {
        width: 100%;
    }
}
/* /Components/Pages/FighterFeature/Pages/FighterWeightTracking.razor.rz.scp.css */
.weight-page[b-ilpucbw3j4] {
    max-width: 600px;
    margin: 0 auto;
    padding: 0rem;
    padding-bottom: 4rem;
}

.weight-loading[b-ilpucbw3j4], .weight-error[b-ilpucbw3j4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: #64748B;
}

/* Navigation */
.weight-nav[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.back-btn[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    color: #1E293B;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.back-btn:hover[b-ilpucbw3j4] {
    background: #E2E8F0;
}

.page-title[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title h1[b-ilpucbw3j4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.page-title i[b-ilpucbw3j4] {
    color: #70AFFB;
    font-size: 24px;
}

/* Fighter Header Mini */
.fighter-header-mini[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid #E2E8F0;
}

.fighter-avatar-small[b-ilpucbw3j4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    flex-shrink: 0;
}

.fighter-avatar-small img[b-ilpucbw3j4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-fallback[b-ilpucbw3j4] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.fighter-info-mini[b-ilpucbw3j4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fighter-name[b-ilpucbw3j4] {
    font-weight: 600;
    color: #1E293B;
}

.camp-badge[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #70AFFB;
    font-weight: 600;
}

.camp-badge i[b-ilpucbw3j4] {
    font-size: 14px;
}

/* Current Weight Card */
.current-weight-card[b-ilpucbw3j4] {
    background: linear-gradient(135deg, #70AFFB 0%, #4A9FEB 100%);
    border-radius: 20px;
    padding: 1.5rem;
    color: white;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.weight-display[b-ilpucbw3j4] {
    text-align: center;
}

.weight-label[b-ilpucbw3j4] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.weight-value[b-ilpucbw3j4] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.weight-number[b-ilpucbw3j4] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}

.weight-number.no-data[b-ilpucbw3j4] {
    opacity: 0.5;
}

.weight-unit[b-ilpucbw3j4] {
    font-size: 1.5rem;
    font-weight: 600;
    opacity: 0.9;
}

.last-logged[b-ilpucbw3j4] {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}

.log-weight-btn[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: white;
    border: none;
    border-radius: 12px;
    color: #70AFFB;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.log-weight-btn:hover[b-ilpucbw3j4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.log-weight-btn i[b-ilpucbw3j4] {
    font-size: 20px;
}

.log-weight-btn.compact[b-ilpucbw3j4] {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: white;
}

/* Target Section */
.target-section[b-ilpucbw3j4] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #E2E8F0;
}

.target-header[b-ilpucbw3j4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.target-header h3[b-ilpucbw3j4] {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1E293B;
}

.target-header h3 i[b-ilpucbw3j4] {
    color: #70AFFB;
}

.target-date[b-ilpucbw3j4] {
    font-size: 0.85rem;
    color: #64748B;
}

.target-stats[b-ilpucbw3j4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.target-stats .stat[b-ilpucbw3j4] {
    text-align: center;
    position: relative;
    flex: 1;
}

.target-stats .stat-value[b-ilpucbw3j4] {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}

.target-stats .stat-label[b-ilpucbw3j4] {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 0.25rem;
    text-transform: uppercase;
}

.target-stats .stat.target .stat-value[b-ilpucbw3j4] {
    color: #70AFFB;
}

.target-stats .stat.danger .stat-value[b-ilpucbw3j4] {
    color: #EF4444;
}

.target-stats .stat.success .stat-value[b-ilpucbw3j4] {
    color: #22C55E;
}

.target-stats .stat.warning .stat-value[b-ilpucbw3j4] {
    color: #F59E0B;
}

/* Status badge positioned above the stat - absolute positioning */
.target-stats .stat-status[b-ilpucbw3j4] {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    white-space: nowrap;
}

.target-stats .stat.success .stat-status[b-ilpucbw3j4] {
    background: #D1FAE5;
    color: #059669;
}

.target-stats .stat.warning .stat-status[b-ilpucbw3j4] {
    background: #FEF3C7;
    color: #D97706;
}

.target-stats .stat.danger .stat-status[b-ilpucbw3j4] {
    background: #FEE2E2;
    color: #DC2626;
}

.progress-bar-container[b-ilpucbw3j4] {
    margin-bottom: 1rem;
}

.progress-bar[b-ilpucbw3j4] {
    height: 12px;
    background: #F1F5F9;
    border-radius: 6px;
    position: relative;
    overflow: visible;
}

.progress-fill[b-ilpucbw3j4] {
    height: 100%;
    background: linear-gradient(90deg, #22C55E, #70AFFB);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.progress-fill.excellent[b-ilpucbw3j4] {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.progress-fill.good[b-ilpucbw3j4] {
    background: linear-gradient(90deg, #84CC16, #A3E635);
}

.progress-fill.moderate[b-ilpucbw3j4] {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.progress-fill.needs-work[b-ilpucbw3j4] {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

.target-marker[b-ilpucbw3j4] {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    background: #70AFFB;
    border-radius: 2px;
    transform: translateX(-50%);
}

.progress-labels[b-ilpucbw3j4] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 0.5rem;
}

.rate-info[b-ilpucbw3j4] {
    text-align: center;
    font-size: 0.9rem;
    color: #64748B;
}

.rate-info .rate.success[b-ilpucbw3j4] {
    color: #22C55E;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* History Section */
.history-section[b-ilpucbw3j4] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #E2E8F0;
}

.section-header[b-ilpucbw3j4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #F1F5F9;
}

.section-header h3[b-ilpucbw3j4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
}

.history-count[b-ilpucbw3j4] {
    font-size: 0.85rem;
    color: #64748B;
}

.history-list[b-ilpucbw3j4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #E8EDF2;
    transition: all 0.2s;
}

.history-item:hover[b-ilpucbw3j4] {
    background: #F0F7FF;
    border-color: #70AFFB;
}

.history-date[b-ilpucbw3j4] {
    text-align: center;
    min-width: 44px;
    padding: 0.35rem 0.5rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.history-date .day[b-ilpucbw3j4] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

.history-date .month[b-ilpucbw3j4] {
    display: block;
    font-size: 0.65rem;
    color: #64748B;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.15rem;
}

.history-date .time[b-ilpucbw3j4] {
    display: block;
    font-size: 0.6rem;
    color: #94A3B8;
    margin-top: 0.15rem;
    white-space: nowrap;
}

.history-weight[b-ilpucbw3j4] {
    flex: 1;
    min-width: 0;
}

.history-weight .weight[b-ilpucbw3j4] {
    font-weight: 700;
    color: #1E293B;
    font-size: 1rem;
}

.history-weight .weight-alt[b-ilpucbw3j4] {
    font-size: 0.8rem;
    color: #94A3B8;
    margin-left: 0.35rem;
}

.history-change[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.history-change i[b-ilpucbw3j4] {
    font-size: 14px;
}

.history-change.down[b-ilpucbw3j4] {
    background: #DCFCE7;
    color: #16A34A;
}

.history-change.up[b-ilpucbw3j4] {
    background: #FEE2E2;
    color: #DC2626;
}

.history-notes[b-ilpucbw3j4] {
    color: #94A3B8;
    padding: 0.35rem;
}

.history-notes i[b-ilpucbw3j4] {
    font-size: 18px;
}

.history-delete[b-ilpucbw3j4] {
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}

.history-delete:hover[b-ilpucbw3j4] {
    background: #FEE2E2;
    color: #DC2626;
}

.history-delete i[b-ilpucbw3j4] {
    font-size: 18px;
}

.show-more[b-ilpucbw3j4] {
    text-align: center;
    margin-top: 1rem;
}

.empty-history[b-ilpucbw3j4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.5rem;
    color: #64748B;
    text-align: center;
}

.empty-history > i[b-ilpucbw3j4] {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
    color: #CBD5E1;
}

.empty-history span[b-ilpucbw3j4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
}

.empty-history p[b-ilpucbw3j4] {
    margin: 0.5rem 0 1.25rem;
    font-size: 0.9rem;
}

/* Pagination Controls */
.pagination-controls[b-ilpucbw3j4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
}

.showing-count[b-ilpucbw3j4] {
    font-size: 0.85rem;
    color: #64748B;
}

.pagination-buttons[b-ilpucbw3j4] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.load-more-btn[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #70AFFB 0%, #4A9FEB 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.load-more-btn:hover[b-ilpucbw3j4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(112, 175, 251, 0.3);
}

.load-more-btn i[b-ilpucbw3j4] {
    font-size: 16px;
}

.show-all-btn[b-ilpucbw3j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    color: #64748B;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.show-all-btn:hover[b-ilpucbw3j4] {
    background: #E2E8F0;
    color: #1E293B;
}

/* Mobile */
@media (max-width: 480px) {
    .weight-number[b-ilpucbw3j4] {
        font-size: 2.75rem;
    }

    .weight-unit[b-ilpucbw3j4] {
        font-size: 1.25rem;
    }

    .history-item[b-ilpucbw3j4] {
        flex-wrap: wrap;
    }

    .history-weight[b-ilpucbw3j4] {
        flex: 1 1 auto;
    }

    .log-weight-btn[b-ilpucbw3j4] {
        padding: 0.75rem 1.5rem;
    }
    
    .pagination-buttons[b-ilpucbw3j4] {
        width: 100%;
    }
    
    .load-more-btn[b-ilpucbw3j4],
    .show-all-btn[b-ilpucbw3j4] {
        flex: 1;
        min-width: 120px;
    }
}
/* /Components/Pages/GamificationFeatures/Pages/BattlePass.razor.rz.scp.css */
/* =============================================
   BATTLE PASS PAGE STYLES
   Matches app's light theme with accent colors
   ============================================= */

.battlepass-container[b-5x1dqnc5hi] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ===== HEADER ===== */
.bp-header[b-5x1dqnc5hi] {
    margin-bottom: 1.5rem;
}

.bp-header-content[b-5x1dqnc5hi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.bp-title-section[b-5x1dqnc5hi] {
    flex: 1;
}

.bp-title[b-5x1dqnc5hi] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bp-title .rzi[b-5x1dqnc5hi] {
    color: #f59e0b;
    font-size: 2rem;
}

.bp-subtitle[b-5x1dqnc5hi] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
}

.bp-season-badge[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #70AFFB, #3b82f6);
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
}

.season-label[b-5x1dqnc5hi] {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== XP PROGRESS SECTION ===== */
.bp-xp-section[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

.bp-xp-header[b-5x1dqnc5hi] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.bp-level-badge[b-5x1dqnc5hi] {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    flex-shrink: 0;
}

.level-number[b-5x1dqnc5hi] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.level-label[b-5x1dqnc5hi] {
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bp-xp-info[b-5x1dqnc5hi] {
    flex: 1;
}

.xp-current[b-5x1dqnc5hi] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.xp-next[b-5x1dqnc5hi] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-top: 0.125rem;
}

/* ===== MILESTONE PROGRESS BAR ===== */
.bp-milestone-track[b-5x1dqnc5hi] {
    position: relative;
    padding-top: 2.25rem;
}

.milestone-bar[b-5x1dqnc5hi] {
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    overflow: hidden;
}

.milestone-progress[b-5x1dqnc5hi] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.milestone-markers[b-5x1dqnc5hi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.milestone-marker[b-5x1dqnc5hi] {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.milestone-marker:hover[b-5x1dqnc5hi] {
    transform: translateX(-50%) scale(1.1);
}

.marker-icon[b-5x1dqnc5hi] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #475569;
    border: 2px solid #64748b;
    color: #94a3b8;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.milestone-marker.unlocked .marker-icon[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #4ade80;
    color: #ffffff;
}

.milestone-marker.claimed .marker-icon[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    color: #ffffff;
}

.marker-xp[b-5x1dqnc5hi] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
    font-weight: 600;
}

/* Rarity colors for markers */
.marker-icon.rarity-uncommon[b-5x1dqnc5hi] { border-color: #22c55e; }
.marker-icon.rarity-rare[b-5x1dqnc5hi] { border-color: #3b82f6; }
.marker-icon.rarity-epic[b-5x1dqnc5hi] { border-color: #a855f7; }
.marker-icon.rarity-legendary[b-5x1dqnc5hi] { border-color: #f59e0b; }

/* ===== RESPONSIVE VISIBILITY ===== */
.desktop-only[b-5x1dqnc5hi] {
    display: block;
}

.mobile-only[b-5x1dqnc5hi] {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only[b-5x1dqnc5hi] {
        display: none;
    }
    
    .mobile-only[b-5x1dqnc5hi] {
        display: block;
    }
}

/* ===== MOBILE MILESTONE SCROLL ===== */
.bp-milestone-scroll[b-5x1dqnc5hi] {
    margin-top: 1rem;
}

.milestone-scroll-hint[b-5x1dqnc5hi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
}

.milestone-scroll-hint[b-5x1dqnc5hi]  .rzi {
    font-size: 1rem;
}

.milestone-scroll-track[b-5x1dqnc5hi] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.milestone-scroll-track[b-5x1dqnc5hi]::-webkit-scrollbar {
    height: 6px;
}

.milestone-scroll-track[b-5x1dqnc5hi]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.milestone-scroll-track[b-5x1dqnc5hi]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.milestone-scroll-item[b-5x1dqnc5hi] {
    flex-shrink: 0;
    width: 110px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.milestone-scroll-item:active[b-5x1dqnc5hi] {
    transform: scale(0.96);
}

.milestone-scroll-item.unlocked[b-5x1dqnc5hi] {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.milestone-scroll-item.claimed[b-5x1dqnc5hi] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Rarity border colors */
.milestone-scroll-item.rarity-uncommon:not(.claimed)[b-5x1dqnc5hi] { border-color: rgba(34, 197, 94, 0.4); }
.milestone-scroll-item.rarity-rare:not(.claimed)[b-5x1dqnc5hi] { border-color: rgba(59, 130, 246, 0.4); }
.milestone-scroll-item.rarity-epic:not(.claimed)[b-5x1dqnc5hi] { border-color: rgba(168, 85, 247, 0.4); }
.milestone-scroll-item.rarity-legendary:not(.claimed)[b-5x1dqnc5hi] { border-color: rgba(245, 158, 11, 0.5); }

.scroll-item-icon[b-5x1dqnc5hi] {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-item-icon[b-5x1dqnc5hi]  .rzi {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
}

.milestone-scroll-item.unlocked .scroll-item-icon[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.milestone-scroll-item.unlocked .scroll-item-icon[b-5x1dqnc5hi]  .rzi {
    color: #ffffff;
}

.milestone-scroll-item.claimed .scroll-item-icon[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.milestone-scroll-item.claimed .scroll-item-icon[b-5x1dqnc5hi]  .rzi {
    color: #ffffff;
}

/* Rarity icon backgrounds */
.milestone-scroll-item.rarity-uncommon:not(.unlocked):not(.claimed) .scroll-item-icon[b-5x1dqnc5hi] {
    border: 2px solid rgba(34, 197, 94, 0.5);
}

.milestone-scroll-item.rarity-rare:not(.unlocked):not(.claimed) .scroll-item-icon[b-5x1dqnc5hi] {
    border: 2px solid rgba(59, 130, 246, 0.5);
}

.milestone-scroll-item.rarity-epic:not(.unlocked):not(.claimed) .scroll-item-icon[b-5x1dqnc5hi] {
    border: 2px solid rgba(168, 85, 247, 0.5);
}

.milestone-scroll-item.rarity-legendary:not(.unlocked):not(.claimed) .scroll-item-icon[b-5x1dqnc5hi] {
    border: 2px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.scroll-item-name[b-5x1dqnc5hi] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-item-xp[b-5x1dqnc5hi] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.scroll-item-claim[b-5x1dqnc5hi] {
    font-size: 0.65rem;
    color: #4ade80;
    font-weight: 700;
    margin-top: 4px;
    animation: claimPulse-b-5x1dqnc5hi 1.5s ease-in-out infinite;
}

@keyframes claimPulse-b-5x1dqnc5hi {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.scroll-item-locked[b-5x1dqnc5hi] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

/* ===== MAIN CONTENT GRID ===== */
.bp-content[b-5x1dqnc5hi] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .bp-content[b-5x1dqnc5hi] {
        grid-template-columns: 1fr;
    }
}

/* ===== PANEL STYLES ===== */
.bp-rewards-panel[b-5x1dqnc5hi],
.bp-quests-panel[b-5x1dqnc5hi] {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.panel-header[b-5x1dqnc5hi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.panel-header h2[b-5x1dqnc5hi] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header h2 .rzi[b-5x1dqnc5hi] {
    color: #70AFFB;
}

.claimed-count[b-5x1dqnc5hi] {
    font-size: 0.8rem;
    color: #64748b;
}

/* ===== REWARDS GRID ===== */
.rewards-grid[b-5x1dqnc5hi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.875rem;
    padding: 1.25rem;
}

.reward-card[b-5x1dqnc5hi] {
    background: #f8fafc;
    border-radius: 0.875rem;
    padding: 1rem;
    text-align: center;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
    position: relative;
}

.reward-card:hover[b-5x1dqnc5hi] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.reward-card.locked[b-5x1dqnc5hi] {
    opacity: 0.5;
}

.reward-card.unlocked[b-5x1dqnc5hi] {
    border-color: #22c55e;
    background: #f0fdf4;
}

.reward-card.claimed[b-5x1dqnc5hi] {
    border-color: #3b82f6;
    background: #eff6ff;
    opacity: 0.7;
}

/* Rarity borders */
.reward-card.rarity-uncommon.unlocked[b-5x1dqnc5hi] { border-color: #22c55e; background: #f0fdf4; }
.reward-card.rarity-rare.unlocked[b-5x1dqnc5hi] { border-color: #3b82f6; background: #eff6ff; }
.reward-card.rarity-epic.unlocked[b-5x1dqnc5hi] { border-color: #a855f7; background: #faf5ff; }
.reward-card.rarity-legendary.unlocked[b-5x1dqnc5hi] { border-color: #f59e0b; background: #fffbeb; }

.reward-xp-badge[b-5x1dqnc5hi] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #1e293b;
    color: #f59e0b;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
}

.reward-icon[b-5x1dqnc5hi] {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.625rem;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-card.unlocked .reward-icon[b-5x1dqnc5hi],
.reward-card.claimed .reward-icon[b-5x1dqnc5hi] {
    background: linear-gradient(135deg, #70AFFB, #3b82f6);
}

.reward-icon .rzi[b-5x1dqnc5hi] {
    font-size: 1.5rem;
    color: #64748b;
}

.reward-card.unlocked .reward-icon .rzi[b-5x1dqnc5hi],
.reward-card.claimed .reward-icon .rzi[b-5x1dqnc5hi] {
    color: #ffffff;
}

.reward-name[b-5x1dqnc5hi] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.8rem;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reward-rarity[b-5x1dqnc5hi] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}

.rarity-common .reward-rarity[b-5x1dqnc5hi] { color: #94a3b8; }
.rarity-uncommon .reward-rarity[b-5x1dqnc5hi] { color: #22c55e; }
.rarity-rare .reward-rarity[b-5x1dqnc5hi] { color: #3b82f6; }
.rarity-epic .reward-rarity[b-5x1dqnc5hi] { color: #a855f7; }
.rarity-legendary .reward-rarity[b-5x1dqnc5hi] { color: #f59e0b; }

.claim-btn[b-5x1dqnc5hi] {
    width: 100%;
}

.claimed-badge[b-5x1dqnc5hi],
.locked-badge[b-5x1dqnc5hi] {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.claimed-badge[b-5x1dqnc5hi] {
    background: #dbeafe;
    color: #2563eb;
}

.locked-badge[b-5x1dqnc5hi] {
    background: #f1f5f9;
    color: #64748b;
}

/* ===== QUESTS PANEL ===== */
.bp-quests-panel[b-5x1dqnc5hi] {
    display: flex;
    flex-direction: column;
}

.quest-section[b-5x1dqnc5hi] {
    border-bottom: 1px solid #e2e8f0;
}

.quest-section:last-child[b-5x1dqnc5hi] {
    border-bottom: none;
}

.quest-section-header[b-5x1dqnc5hi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.85rem;
}

.quest-section-header .rzi[b-5x1dqnc5hi] {
    color: #70AFFB;
}

.quest-reset[b-5x1dqnc5hi] {
    margin-left: auto;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 400;
}

.quest-list[b-5x1dqnc5hi] {
    padding: 0.375rem;
}

.quest-item[b-5x1dqnc5hi] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    transition: background 0.2s ease;
}

.quest-item:hover[b-5x1dqnc5hi] {
    background: #f8fafc;
}

.quest-item.completed[b-5x1dqnc5hi] {
    opacity: 0.5;
}

.quest-checkbox[b-5x1dqnc5hi] {
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-empty[b-5x1dqnc5hi] {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
}

.check-icon[b-5x1dqnc5hi] {
    color: #22c55e;
    font-size: 1.125rem;
}

.quest-info[b-5x1dqnc5hi] {
    flex: 1;
    min-width: 0;
}

.quest-title[b-5x1dqnc5hi] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.85rem;
    margin-bottom: 0.125rem;
}

.quest-title.strikethrough[b-5x1dqnc5hi] {
    text-decoration: line-through;
    color: #94a3b8;
}

.quest-desc[b-5x1dqnc5hi] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.quest-progress-bar[b-5x1dqnc5hi] {
    height: 5px;
    background: #e2e8f0;
    border-radius: 2.5px;
    overflow: hidden;
    margin-bottom: 0.2rem;
}

.quest-progress-bar .progress-fill[b-5x1dqnc5hi] {
    height: 100%;
    background: linear-gradient(90deg, #70AFFB, #3b82f6);
    border-radius: 2.5px;
    transition: width 0.3s ease;
}

.quest-progress-text[b-5x1dqnc5hi] {
    font-size: 0.65rem;
    color: #94a3b8;
}

.quest-xp[b-5x1dqnc5hi] {
    flex-shrink: 0;
    font-weight: 700;
    color: #f59e0b;
    font-size: 0.8rem;
    background: #fffbeb;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
    border: 1px solid #fde68a;
}

.quest-item.completed .quest-xp[b-5x1dqnc5hi] {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.no-quests[b-5x1dqnc5hi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
    color: #64748b;
    font-size: 0.85rem;
}

.no-quests .rzi[b-5x1dqnc5hi] {
    color: #f59e0b;
}

/* ===== ERROR STATE ===== */
.bp-error[b-5x1dqnc5hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: #64748b;
}

.bp-error h3[b-5x1dqnc5hi] {
    color: #1e293b;
    margin: 1rem 0 0.5rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .battlepass-container[b-5x1dqnc5hi] {
        padding: 0rem;
    }

    .bp-title[b-5x1dqnc5hi] {
        font-size: 1.5rem;
    }

    .bp-level-badge[b-5x1dqnc5hi] {
        width: 56px;
        height: 56px;
    }

    .level-number[b-5x1dqnc5hi] {
        font-size: 1.25rem;
    }

    .rewards-grid[b-5x1dqnc5hi] {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
        gap: 0.75rem;
    }

    .milestone-marker[b-5x1dqnc5hi] {
        display: none;
    }

    .milestone-marker:nth-child(3n+1)[b-5x1dqnc5hi] {
        display: flex;
    }
}
/* /Components/Pages/GamificationFeatures/Pages/Leaderboard.razor.rz.scp.css */
.leaderboard-page[b-p4biivyah3] {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    min-height: 100vh;
}

/* ===== PAGE HEADER ===== */
.page-header[b-p4biivyah3] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.header-left h1[b-p4biivyah3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.header-left h1[b-p4biivyah3]  .rzi {
    color: #F59E0B;
    font-size: 1.75rem;
}

.season-tag[b-p4biivyah3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 2px solid #F59E0B;
    color: #F59E0B;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.season-tag[b-p4biivyah3]  .rzi {
    font-size: 0.9rem;
}

.season-dates[b-p4biivyah3] {
    opacity: 0.9;
    font-weight: 600;
}

.header-right[b-p4biivyah3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Demo Toggle */
.demo-toggle[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #F59E0B;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 700;
    color: #F59E0B;
    text-transform: uppercase;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.demo-toggle input[type="checkbox"][b-p4biivyah3] {
    accent-color: #F59E0B;
    width: 12px;
    height: 12px;
}

/* ===== FILTER BAR ===== */
.filter-bar[b-p4biivyah3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.filter-row[b-p4biivyah3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.scope-toggle[b-p4biivyah3] {
    display: flex;
    background: rgba(255,255,255,0.05);
    padding: 3px;
    border: 1px solid rgba(255,255,255,0.1);
}

.scope-btn[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    border: none;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scope-btn[b-p4biivyah3]  .rzi {
    font-size: 0.95rem;
}

.scope-btn.active[b-p4biivyah3] {
    background: #F59E0B;
    color: #0F172A;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.org-selector[b-p4biivyah3] {
    width: 100%;
}

.org-selector[b-p4biivyah3]  .rz-dropdown {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    font-weight: 600;
}

.view-toggle[b-p4biivyah3] {
    display: flex;
    background: rgba(255,255,255,0.05);
    padding: 3px;
    border: 1px solid rgba(255,255,255,0.1);
}

.toggle-btn[b-p4biivyah3] {
    padding: 0.5rem 0.85rem;
    border: none;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toggle-btn.active[b-p4biivyah3] {
    background: #DC2626;
    color: white;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* ===== CHAMPION SECTION ===== */
.podium-section[b-p4biivyah3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.podium-card[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s;
}

.podium-card:active[b-p4biivyah3] {
    transform: scale(0.98);
}

/* CHAMPION - 1st Place - THE BIG ONE */
.podium-card.gold[b-p4biivyah3] {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
    padding: 1.25rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    order: 1;
}

.podium-card.gold[b-p4biivyah3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}

.podium-card.gold[b-p4biivyah3]::after {
    content: 'CHAMPION';
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 0.55rem;
    font-weight: 900;
    color: rgba(0,0,0,0.3);
    letter-spacing: 2px;
}

.podium-card.gold .position-badge[b-p4biivyah3] {
    background: rgba(0,0,0,0.3);
    width: 44px;
    height: 44px;
}

.podium-card.gold .podium-name[b-p4biivyah3] { 
    color: #1C1917; 
    font-size: 1.1rem;
    font-weight: 900; 
}
.podium-card.gold .podium-xp[b-p4biivyah3] { 
    color: #1C1917; 
    font-size: 1.35rem;
}
.podium-card.gold .podium-stats[b-p4biivyah3] {
    color: rgba(0,0,0,0.6);
}

/* CONTENDER - 2nd Place */
.podium-card.silver[b-p4biivyah3] {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    order: 2;
}

.podium-card.silver[b-p4biivyah3]::after {
    content: 'CONTENDER';
    position: absolute;
    top: 0.4rem;
    right: 0.75rem;
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    letter-spacing: 1.5px;
}

.podium-card.silver .position-badge[b-p4biivyah3] {
    background: rgba(255,255,255,0.15);
}

.podium-card.silver .podium-name[b-p4biivyah3] { color: white; font-weight: 700; }
.podium-card.silver .podium-xp[b-p4biivyah3] { color: #E2E8F0; }
.podium-card.silver .podium-stats[b-p4biivyah3] { color: rgba(255,255,255,0.5); }

/* CHALLENGER - 3rd Place */
.podium-card.bronze[b-p4biivyah3] {
    background: linear-gradient(135deg, #9A3412 0%, #7C2D12 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    order: 3;
}

.podium-card.bronze[b-p4biivyah3]::after {
    content: 'CHALLENGER';
    position: absolute;
    top: 0.4rem;
    right: 0.75rem;
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    letter-spacing: 1.5px;
}

.podium-card.bronze .position-badge[b-p4biivyah3] {
    background: rgba(255,255,255,0.15);
}

.podium-card.bronze .podium-name[b-p4biivyah3] { color: white; font-weight: 700; }
.podium-card.bronze .podium-xp[b-p4biivyah3] { color: #FED7AA; }
.podium-card.bronze .podium-stats[b-p4biivyah3] { color: rgba(255,255,255,0.5); }

/* Position Badge */
.position-badge[b-p4biivyah3] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.position-number[b-p4biivyah3] {
    font-size: 1.25rem;
    font-weight: 900;
    color: white;
}

/* Podium Avatar */
.podium-avatar[b-p4biivyah3] {
    flex-shrink: 0;
}

.podium-avatar[b-p4biivyah3]  .user-profile-image {
    border: 3px solid rgba(255,255,255,0.3);
}

.podium-card.gold .podium-avatar[b-p4biivyah3]  .user-profile-image {
    border-color: rgba(0,0,0,0.2);
}

/* Podium Info */
.podium-info[b-p4biivyah3] {
    flex: 1;
    min-width: 0;
}

.podium-name[b-p4biivyah3] {
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.podium-xp[b-p4biivyah3] {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.podium-stats[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.podium-stats span[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.podium-stats .streak[b-p4biivyah3] {
    color: #FCA5A5 !important;
}

.podium-card.gold .podium-stats .streak[b-p4biivyah3] {
    color: #7C2D12 !important;
}

.podium-stats[b-p4biivyah3]  .rzi {
    font-size: 0.8rem;
}

/* Champion Crown */
.champion-crown[b-p4biivyah3] {
    position: absolute;
    top: 6px;
    left: 1rem;
    display: none;
}

.podium-card.gold .champion-crown[b-p4biivyah3] {
    display: block;
}

.champion-crown[b-p4biivyah3]  .rzi {
    color: #FEF3C7;
    font-size: 1.25rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* You Marker */
.you-marker[b-p4biivyah3] {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: #DC2626;
    color: white;
    font-size: 0.5rem;
    font-weight: 900;
    padding: 0.2rem 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

/* ===== RANKINGS SECTION ===== */
.rankings-section[b-p4biivyah3] {
    background: rgba(255,255,255,0.03);
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
}

.section-header[b-p4biivyah3] {
    margin-bottom: 0.5rem;
}

.section-header h2[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-header h2[b-p4biivyah3]  .rzi {
    font-size: 0.9rem;
    color: #F59E0B;
}

.rankings-list[b-p4biivyah3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ranking-row[b-p4biivyah3] {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.5rem;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.ranking-row:nth-child(odd)[b-p4biivyah3] {
    background: rgba(255,255,255,0.04);
}

.ranking-row:active[b-p4biivyah3] {
    background: rgba(255,255,255,0.08);
}

.ranking-row.is-you[b-p4biivyah3] {
    background: rgba(220, 38, 38, 0.15);
    border-left-color: #DC2626;
}

.rank-col[b-p4biivyah3] {
    text-align: center;
}

.rank-badge[b-p4biivyah3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    font-weight: 900;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.fighter-col[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.fighter-details[b-p4biivyah3] {
    min-width: 0;
    flex: 1;
}

.fighter-name[b-p4biivyah3] {
    font-weight: 700;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fighter-level[b-p4biivyah3] {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.you-pill[b-p4biivyah3] {
    font-size: 0.45rem;
    font-weight: 900;
    text-transform: uppercase;
    background: #DC2626;
    color: white;
    padding: 0.1rem 0.25rem;
    flex-shrink: 0;
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.stats-col[b-p4biivyah3] {
    display: none;
}

.xp-col[b-p4biivyah3] {
    text-align: right;
}

.xp-amount[b-p4biivyah3] {
    font-weight: 900;
    font-size: 0.9rem;
    color: white;
}

.xp-label[b-p4biivyah3] {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    margin-left: 0.1rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===== YOUR RANK CARD ===== */
.your-rank-card[b-p4biivyah3] {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #DC2626;
    padding: 1rem;
    margin-top: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.your-rank-badge[b-p4biivyah3] {
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #DC2626;
    margin-bottom: 0.4rem;
}

.your-rank-content[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.your-rank-number[b-p4biivyah3] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #DC2626;
    line-height: 1;
}

.your-rank-info[b-p4biivyah3] {
    flex: 1;
}

.your-rank-xp[b-p4biivyah3] {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
}

.your-rank-gap[b-p4biivyah3] {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

.your-streak[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.6rem;
    background: #DC2626;
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.your-streak[b-p4biivyah3]  .rzi {
    font-size: 1rem;
}

/* ===== YOUR POSITION SECTION ===== */
.your-position-section[b-p4biivyah3] {
    margin-top: 0.5rem;
}

.position-divider[b-p4biivyah3] {
    text-align: center;
    padding: 0.5rem 0;
    position: relative;
}

.position-divider[b-p4biivyah3]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.divider-dots[b-p4biivyah3] {
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    letter-spacing: 8px;
    font-weight: 900;
    background: #0F172A;
    padding: 0 0.5rem;
    position: relative;
}

.ranking-row.your-position[b-p4biivyah3] {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid #DC2626;
    border-left-width: 3px;
}

.rank-badge.highlight[b-p4biivyah3] {
    background: #DC2626;
    color: white;
}

/* ===== EMPTY / ERROR / LOADING STATES ===== */
.empty-state[b-p4biivyah3],
.error-state[b-p4biivyah3],
.loading-state[b-p4biivyah3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    margin-top: 1rem;
}

.empty-state[b-p4biivyah3]  .rzi,
.error-state[b-p4biivyah3]  .rzi {
    font-size: 3rem;
    color: rgba(255,255,255,0.2);
    margin-bottom: 0.75rem;
}

.error-state[b-p4biivyah3]  .rzi {
    color: #DC2626;
}

.empty-state h3[b-p4biivyah3],
.error-state h3[b-p4biivyah3] {
    margin: 0 0 0.35rem 0;
    color: white;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.empty-state p[b-p4biivyah3],
.error-state p[b-p4biivyah3] {
    margin: 0 0 1rem 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

/* ===== DEMO ITEMS ===== */
.podium-card.demo[b-p4biivyah3],
.ranking-row.demo[b-p4biivyah3] {
    opacity: 0.45;
}

.podium-card.demo[b-p4biivyah3]::before {
    display: none;
}

.podium-card.demo .champion-crown[b-p4biivyah3] {
    display: none;
}

/* ===== DESKTOP ENHANCEMENTS ===== */
@media (min-width: 640px) {
    .leaderboard-page[b-p4biivyah3] {
        padding: 2rem;
    }

    .header-left h1[b-p4biivyah3] {
        font-size: 2rem;
        letter-spacing: 4px;
    }

    /* Horizontal podium on desktop - like a fight card */
    .podium-section[b-p4biivyah3] {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: 0.5rem;
        padding: 1.5rem 0;
    }

    .podium-card[b-p4biivyah3] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
        min-width: 140px;
        flex: 1;
        max-width: 200px;
    }

    .podium-card.gold[b-p4biivyah3] {
        order: 2;
        padding: 2rem 1.25rem;
        transform: translateY(-0.5rem);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    }

    .podium-card.gold[b-p4biivyah3]::after {
        top: 0.75rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .podium-card.silver[b-p4biivyah3] {
        order: 1;
    }

    .podium-card.bronze[b-p4biivyah3] {
        order: 3;
    }

    .position-badge[b-p4biivyah3] {
        width: 48px;
        height: 48px;
        margin: 0 auto 0.75rem;
    }

    .podium-card.gold .position-badge[b-p4biivyah3] {
        width: 56px;
        height: 56px;
    }

    .position-number[b-p4biivyah3] {
        font-size: 1.5rem;
    }

    .podium-card.gold .position-number[b-p4biivyah3] {
        font-size: 1.75rem;
    }

    .podium-avatar[b-p4biivyah3] {
        margin-bottom: 0.75rem;
    }

    .podium-info[b-p4biivyah3] {
        text-align: center;
    }

    .podium-name[b-p4biivyah3] {
        font-size: 0.85rem;
    }

    .podium-card.gold .podium-name[b-p4biivyah3] {
        font-size: 1rem;
    }

    .podium-xp[b-p4biivyah3] {
        font-size: 1.1rem;
    }

    .podium-card.gold .podium-xp[b-p4biivyah3] {
        font-size: 1.5rem;
    }

    .podium-stats[b-p4biivyah3] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .champion-crown[b-p4biivyah3] {
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .champion-crown[b-p4biivyah3]  .rzi {
        font-size: 1.75rem;
    }

    .you-marker[b-p4biivyah3] {
        bottom: auto;
        top: 0.5rem;
    }

    /* Show stats on desktop */
    .stats-col[b-p4biivyah3] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .streak-pill[b-p4biivyah3],
    .badge-pill[b-p4biivyah3] {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    }

    .streak-pill[b-p4biivyah3] {
        background: rgba(220, 38, 38, 0.3);
        color: #FCA5A5;
    }

    .streak-pill[b-p4biivyah3]  .rzi {
        color: #FCA5A5;
        font-size: 0.8rem;
    }

    .badge-pill[b-p4biivyah3] {
        background: rgba(245, 158, 11, 0.3);
        color: #FCD34D;
    }

    .badge-pill[b-p4biivyah3]  .rzi {
        color: #FCD34D;
        font-size: 0.8rem;
    }

    .ranking-row[b-p4biivyah3] {
        grid-template-columns: 36px 1fr auto 80px;
    }
}

/* ===== SECONDARY FILTERS (Season, Sport, Org) ===== */
.secondary-filters[b-p4biivyah3] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
}

.filter-item[b-p4biivyah3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-item label[b-p4biivyah3] {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-item[b-p4biivyah3]  .rz-dropdown {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

.filter-item[b-p4biivyah3]  .rz-dropdown:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.filter-item[b-p4biivyah3]  .rz-dropdown .rz-dropdown-label {
    color: white;
}

/* Dropdown popup styling for dark theme */
.filter-item[b-p4biivyah3]  .rz-dropdown-panel,
[b-p4biivyah3] .rz-dropdown-panel {
    background: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.filter-item[b-p4biivyah3]  .rz-dropdown-item,
[b-p4biivyah3] .rz-dropdown-item {
    color: white !important;
    background: transparent !important;
}

.filter-item[b-p4biivyah3]  .rz-dropdown-item:hover,
[b-p4biivyah3] .rz-dropdown-item:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #FCD34D !important;
}

.filter-item[b-p4biivyah3]  .rz-dropdown-item.rz-state-highlight,
[b-p4biivyah3] .rz-dropdown-item.rz-state-highlight {
    background: rgba(245, 158, 11, 0.3) !important;
    color: #FCD34D !important;
}

.filter-item[b-p4biivyah3]  .rz-placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ===== ACTIVE FILTERS SUMMARY ===== */
.active-filters[b-p4biivyah3] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-chip[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #FCD34D;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chip-remove[b-p4biivyah3] {
    background: none;
    border: none;
    color: #FCD34D;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-left: 0.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.chip-remove:hover[b-p4biivyah3] {
    opacity: 1;
}

.result-count[b-p4biivyah3] {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== ALL-TIME TAG ===== */
.season-tag.alltime[b-p4biivyah3] {
    border-color: #8B5CF6;
    color: #A78BFA;
}

.season-tag.alltime[b-p4biivyah3]  .rzi {
    color: #A78BFA;
}

/* ===== NO ORGS MESSAGE ===== */
.filter-item.no-orgs[b-p4biivyah3] {
    align-items: center;
}

.no-orgs-message[b-p4biivyah3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.no-orgs-message[b-p4biivyah3]  .rzi {
    font-size: 0.9rem;
    color: rgba(245, 158, 11, 0.7);
}
/* /Components/Pages/Landing/Components/LandingFeaturePreviews.razor.rz.scp.css */
/* ============================================
   LANDING PAGE FEATURE PREVIEW STYLES
   Based on actual app component styles
   ============================================ */

/* Base Preview Card */
.landing-preview-card[b-g1rodqhak3] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-width: 100%;
    overflow: hidden;
}

.preview-header[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1E293B;
}

.preview-header .rzi[b-g1rodqhak3] {
    color: #70AFFB;
    font-size: 1.1rem;
}

/* ============================================
   READINESS LEADERBOARD PREVIEW
   ============================================ */
.readiness-leaderboard-preview[b-g1rodqhak3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.leaderboard-row-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: #F8FAFC;
    border-radius: 10px;
    border: 2px solid transparent;
    font-size: 0.8rem;
}

.leaderboard-row-preview.attention[b-g1rodqhak3] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-left: 3px solid #DC2626;
}

.lb-rank-preview[b-g1rodqhak3] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: #64748B;
}

.lb-avatar-preview[b-g1rodqhak3] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lb-info-preview[b-g1rodqhak3] {
    flex: 1;
    min-width: 0;
}

.lb-name-preview[b-g1rodqhak3] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-sport-preview[b-g1rodqhak3] {
    font-size: 0.65rem;
    color: #64748B;
}

.lb-readiness-preview[b-g1rodqhak3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 50px;
}

.lb-score-preview[b-g1rodqhak3] {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1E293B;
}

.lb-bar-preview[b-g1rodqhak3] {
    width: 50px;
    height: 4px;
    background: #E2E8F0;
    border-radius: 2px;
    overflow: hidden;
}

.lb-bar-fill-preview[b-g1rodqhak3] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.lb-bar-fill-preview.ready[b-g1rodqhak3] {
    background: linear-gradient(90deg, #22C55E, #16A34A);
}

.lb-bar-fill-preview.building[b-g1rodqhak3] {
    background: linear-gradient(90deg, #F59E0B, #D97706);
}

.lb-bar-fill-preview.attention[b-g1rodqhak3] {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

.lb-status-preview[b-g1rodqhak3] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lb-status-preview.ready[b-g1rodqhak3] {
    color: #16A34A;
}

.lb-status-preview.building[b-g1rodqhak3] {
    color: #D97706;
}

.lb-status-preview.attention[b-g1rodqhak3] {
    color: #DC2626;
}

/* ============================================
   FIGHTER PROFILE PREVIEW
   ============================================ */
.profile-preview-card[b-g1rodqhak3] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.profile-header-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.profile-avatar-preview[b-g1rodqhak3] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-info-preview[b-g1rodqhak3] {
    flex: 1;
}

.profile-name-preview[b-g1rodqhak3] {
    font-weight: 700;
    font-size: 1rem;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.status-badge-preview[b-g1rodqhak3] {
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.status-badge-preview.pro[b-g1rodqhak3] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}

.status-badge-preview.open[b-g1rodqhak3] {
    background: #DCFCE7;
    color: #16A34A;
}

.profile-division-preview[b-g1rodqhak3] {
    font-size: 0.75rem;
    color: #64748B;
}

.profile-stats-grid-preview[b-g1rodqhak3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.profile-stat-preview[b-g1rodqhak3] {
    background: #F8FAFC;
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
}

.stat-label-preview[b-g1rodqhak3] {
    font-size: 0.55rem;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-value-preview[b-g1rodqhak3] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E293B;
}

.stat-value-preview.readiness[b-g1rodqhak3] {
    color: #70AFFB;
}

.profile-gamification-preview[b-g1rodqhak3] {
    display: flex;
    justify-content: space-around;
    padding-top: 0.5rem;
    border-top: 1px solid #E2E8F0;
}

.gam-stat-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gam-icon-preview[b-g1rodqhak3] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.gam-icon-preview.level[b-g1rodqhak3] {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: white;
}

.gam-icon-preview.xp[b-g1rodqhak3] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}

.gam-icon-preview.streak[b-g1rodqhak3] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
}

.gam-content-preview[b-g1rodqhak3] {
    display: flex;
    flex-direction: column;
}

.gam-value-preview[b-g1rodqhak3] {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1E293B;
    line-height: 1;
}

.gam-label-preview[b-g1rodqhak3] {
    font-size: 0.6rem;
    color: #64748B;
}

/* ============================================
   SESSION SCHEDULE PREVIEW
   ============================================ */
.schedule-preview-card[b-g1rodqhak3] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.schedule-grid-preview[b-g1rodqhak3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.schedule-row-preview[b-g1rodqhak3] {
    display: flex;
    gap: 3px;
}

.day-label-preview[b-g1rodqhak3] {
    width: 32px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #64748B;
    display: flex;
    align-items: center;
}

.time-cell-preview[b-g1rodqhak3] {
    flex: 1;
    min-height: 28px;
    background: #F8FAFC;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.time-cell-preview.has-session[b-g1rodqhak3] {
    background: transparent;
}

.session-chip-preview[b-g1rodqhak3] {
    font-size: 0.55rem;
    padding: 4px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.session-chip-preview.training[b-g1rodqhak3] {
    background: rgba(112, 175, 251, 0.15);
    border-left: 2px solid #70AFFB;
    color: #32677E;
}

.session-chip-preview.sparring[b-g1rodqhak3] {
    background: rgba(236, 72, 153, 0.15);
    border-left: 2px solid #EC4899;
    color: #9D174D;
}

.session-chip-preview.strength[b-g1rodqhak3] {
    background: rgba(239, 68, 68, 0.15);
    border-left: 2px solid #EF4444;
    color: #991B1B;
}

.session-chip-preview.recovery[b-g1rodqhak3] {
    background: rgba(16, 185, 129, 0.15);
    border-left: 2px solid #10B981;
    color: #065F46;
}

.schedule-stats-preview[b-g1rodqhak3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #E2E8F0;
    font-size: 0.65rem;
    color: #64748B;
}

.schedule-legend-preview[b-g1rodqhak3] {
    display: flex;
    gap: 0.5rem;
}

.legend-dot-preview[b-g1rodqhak3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ============================================
   GAMIFICATION / CHALLENGES PREVIEW
   ============================================ */
.gamification-preview-card[b-g1rodqhak3] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.challenge-item-preview[b-g1rodqhak3] {
    background: #F8FAFC;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}

.challenge-header-preview[b-g1rodqhak3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.challenge-title-preview[b-g1rodqhak3] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #1E293B;
}

.challenge-days-preview[b-g1rodqhak3] {
    font-size: 0.6rem;
    background: #70AFFB;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.challenge-progress-preview[b-g1rodqhak3] {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.challenge-progress-fill-preview[b-g1rodqhak3] {
    height: 100%;
    background: linear-gradient(90deg, #70AFFB, #32677E);
    border-radius: 3px;
}

.challenge-footer-preview[b-g1rodqhak3] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #64748B;
}

.challenge-xp-preview[b-g1rodqhak3] {
    color: #32677E;
    font-weight: 600;
}

/* Quest Items */
.quest-item-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: #F8FAFC;
    border-radius: 8px;
    margin-bottom: 0.4rem;
}

.quest-item-preview.done[b-g1rodqhak3] {
    opacity: 0.6;
}

.quest-checkbox-preview[b-g1rodqhak3] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quest-checkbox-preview.checked[b-g1rodqhak3] {
    background: #70AFFB;
    border-color: #70AFFB;
    color: white;
}

.quest-meta-preview[b-g1rodqhak3] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quest-title-preview[b-g1rodqhak3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E293B;
}

.quest-item-preview.done .quest-title-preview[b-g1rodqhak3] {
    text-decoration: line-through;
}

.quest-xp-preview[b-g1rodqhak3] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #32677E;
}

/* ============================================
   CAMP PROGRESS PREVIEW
   ============================================ */
.camp-progress-preview-card[b-g1rodqhak3] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.camp-fighter-item-preview[b-g1rodqhak3] {
    background: #F8FAFC;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.camp-fighter-header-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.camp-avatar-preview[b-g1rodqhak3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70AFFB, #32677E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.camp-fighter-info-preview[b-g1rodqhak3] {
    flex: 1;
}

.camp-fighter-name-preview[b-g1rodqhak3] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #1E293B;
}

.camp-fighter-role-preview[b-g1rodqhak3] {
    font-size: 0.65rem;
    color: #64748B;
}

.camp-days-badge-preview[b-g1rodqhak3] {
    text-align: center;
    padding: 4px 8px;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-radius: 8px;
}

.days-value-preview[b-g1rodqhak3] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #92400E;
    display: block;
    line-height: 1;
}

.days-label-preview[b-g1rodqhak3] {
    font-size: 0.55rem;
    color: #B45309;
}

.weight-metrics-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.weight-metric-preview[b-g1rodqhak3] {
    text-align: center;
}

.weight-value-preview[b-g1rodqhak3] {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1E293B;
}

.weight-label-preview[b-g1rodqhak3] {
    font-size: 0.55rem;
    color: #64748B;
}

.weight-arrow-preview[b-g1rodqhak3] {
    color: #64748B;
    font-size: 0.8rem;
}

.weight-metric-preview.diff .weight-value-preview[b-g1rodqhak3] {
    color: #16A34A;
}

.weight-metric-preview.diff.warning .weight-value-preview[b-g1rodqhak3] {
    color: #D97706;
}

.weight-progress-preview[b-g1rodqhak3] {
    height: 4px;
    background: #E2E8F0;
    border-radius: 2px;
    overflow: hidden;
}

.weight-progress-fill-preview[b-g1rodqhak3] {
    height: 100%;
    background: linear-gradient(90deg, #22C55E, #16A34A);
    border-radius: 2px;
}

.weight-progress-fill-preview.warning[b-g1rodqhak3] {
    background: linear-gradient(90deg, #F59E0B, #D97706);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .profile-stats-grid-preview[b-g1rodqhak3] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .schedule-row-preview .time-cell-preview[b-g1rodqhak3] {
        min-height: 24px;
    }
}

/* ============================================
   BATTLE PASS PREVIEW
   ============================================ */
.battlepass-preview-card[b-g1rodqhak3] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* XP Header */
.bp-preview-header[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 10px;
}

.bp-level-preview[b-g1rodqhak3] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bp-level-preview .level-num[b-g1rodqhak3] {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.bp-level-preview .level-txt[b-g1rodqhak3] {
    font-size: 0.45rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
}

.bp-xp-preview[b-g1rodqhak3] {
    flex: 1;
}

.xp-text-preview[b-g1rodqhak3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.35rem;
}

.xp-bar-preview[b-g1rodqhak3] {
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
}

.xp-fill-preview[b-g1rodqhak3] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 3px;
}

/* Milestone Track */
.bp-milestones-preview[b-g1rodqhak3] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.875rem;
    padding: 0 0.25rem;
}

.milestone-preview[b-g1rodqhak3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.milestone-icon-preview[b-g1rodqhak3] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    border: 2px solid #cbd5e1;
    color: #94a3b8;
}

.milestone-preview.claimed .milestone-icon-preview[b-g1rodqhak3] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    color: #fff;
}

.milestone-preview.next .milestone-icon-preview[b-g1rodqhak3] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #4ade80;
    color: #fff;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.milestone-preview.locked .milestone-icon-preview[b-g1rodqhak3] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.milestone-xp[b-g1rodqhak3] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #64748b;
}

/* Quests Section */
.bp-quests-preview[b-g1rodqhak3] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 0.625rem;
}

.quests-header-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #e2e8f0;
}

.quest-row-preview[b-g1rodqhak3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.quest-row-preview.done[b-g1rodqhak3] {
    opacity: 0.5;
}

.quest-check-preview[b-g1rodqhak3] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quest-check-preview.checked[b-g1rodqhak3] {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.quest-name-preview[b-g1rodqhak3] {
    flex: 1;
    font-size: 0.7rem;
    font-weight: 500;
    color: #1e293b;
}

.quest-row-preview.done .quest-name-preview[b-g1rodqhak3] {
    text-decoration: line-through;
    color: #94a3b8;
}

.quest-xp-preview[b-g1rodqhak3] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #f59e0b;
    background: #fffbeb;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    border: 1px solid #fde68a;
}

.quest-row-preview.done .quest-xp-preview[b-g1rodqhak3] {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* /Components/Pages/Landing/Components/PricingSection.razor.rz.scp.css */
/* Pricing Section */
.pricing-section[b-ocykqf45q1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ===== FIGHTER CARD ===== */
.fighter-card[b-ocykqf45q1] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(30, 41, 59, 0.3);
}

.fighter-card[b-ocykqf45q1]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(112, 175, 251, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.fighter-card-badge[b-ocykqf45q1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(112, 175, 251, 0.2);
    color: #70AFFB;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.fighter-card-badge[b-ocykqf45q1]  .rzi {
    font-size: 1.1rem;
}

.fighter-card-content[b-ocykqf45q1] {
    display: flex;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 768px) {
    .fighter-card-content[b-ocykqf45q1] {
        flex-direction: column;
        text-align: center;
    }
}

.fighter-card-left[b-ocykqf45q1] {
    flex: 1;
}

.fighter-card-left h3[b-ocykqf45q1] {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.fighter-tagline[b-ocykqf45q1] {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 1.5rem;
}

.fighter-features[b-ocykqf45q1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .fighter-features[b-ocykqf45q1] {
        grid-template-columns: 1fr;
    }
}

.fighter-feature[b-ocykqf45q1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #cbd5e1;
    font-size: 0.9rem;
}

.fighter-feature[b-ocykqf45q1]  .rzi {
    color: #70AFFB;
    font-size: 1.25rem;
}

.fighter-card-right[b-ocykqf45q1] {
    flex-shrink: 0;
}

.fighter-price-box[b-ocykqf45q1] {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    text-align: center;
    min-width: 260px;
}

.trial-badge[b-ocykqf45q1] {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.fighter-price[b-ocykqf45q1] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.125rem;
}

.fighter-price .currency[b-ocykqf45q1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.fighter-price .amount[b-ocykqf45q1] {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.fighter-price .period[b-ocykqf45q1] {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.annual-note[b-ocykqf45q1] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.no-cc[b-ocykqf45q1] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0.75rem 0 0;
}

/* ===== GYM PLANS SECTION ===== */
.gym-plans-section[b-ocykqf45q1] {
    padding: 2rem 0;
}

.gym-plans-header[b-ocykqf45q1] {
    text-align: center;
    margin-bottom: 2rem;
}

.gym-plans-icon[b-ocykqf45q1] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.gym-plans-icon[b-ocykqf45q1]  .rzi {
    font-size: 2rem;
    color: white;
}

.gym-plans-header h2[b-ocykqf45q1] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.5rem;
}

.gym-plans-header p[b-ocykqf45q1] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

/* ===== BILLING TOGGLE ===== */
.billing-toggle-container[b-ocykqf45q1] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.billing-toggle[b-ocykqf45q1] {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 0.75rem;
    padding: 0.25rem;
}

.toggle-btn[b-ocykqf45q1] {
    padding: 0.625rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-btn.active[b-ocykqf45q1] {
    background: white;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.save-badge[b-ocykqf45q1] {
    background: #dcfce7;
    color: #166534;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ===== PRICING GRID ===== */
.pricing-grid[b-ocykqf45q1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .pricing-grid[b-ocykqf45q1] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

.pricing-card[b-ocykqf45q1] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}

.pricing-card:hover[b-ocykqf45q1] {
    border-color: #70AFFB;
    box-shadow: 0 12px 32px rgba(112, 175, 251, 0.15);
    transform: translateY(-4px);
}

.pricing-card.featured[b-ocykqf45q1] {
    border-color: #70AFFB;
    box-shadow: 0 8px 24px rgba(112, 175, 251, 0.2);
}

.popular-badge[b-ocykqf45q1] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-content[b-ocykqf45q1] {
    flex: 1;
}

.pricing-content h4[b-ocykqf45q1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.plan-note[b-ocykqf45q1] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1.25rem;
}

.price-container[b-ocykqf45q1] {
    margin-bottom: 1.5rem;
}

.price-display[b-ocykqf45q1] {
    display: flex;
    align-items: baseline;
}

.price-display .currency[b-ocykqf45q1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.price-display .amount[b-ocykqf45q1] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.price-display .period[b-ocykqf45q1] {
    font-size: 0.9rem;
    color: #64748b;
    margin-left: 0.25rem;
}

.annual-billing[b-ocykqf45q1] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* ===== FEATURES LIST ===== */
.features-list[b-ocykqf45q1] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.feature-item[b-ocykqf45q1] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #475569;
}

.feature-item[b-ocykqf45q1]  .rzi {
    color: #22c55e;
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* ===== PRICING FOOTER ===== */
.pricing-footer[b-ocykqf45q1] {
    text-align: center;
}

.trial-note[b-ocykqf45q1] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.5rem;
}
/* /Components/Pages/Layout/Components/Menu.razor.rz.scp.css */
.role-toggle-section[b-3arybj4vkg] {
    margin: 0.5rem 1rem 0.75rem 1rem;
    padding: 0;
}

    .role-toggle-section .role-toggle-container[b-3arybj4vkg] {
        padding: 0;
    }

    .role-toggle-section .role-toggle[b-3arybj4vkg] {
        background: #F1F5F9;
        border-radius: 14px;
        padding: 4px;
    }

    .role-toggle-section .role-btn[b-3arybj4vkg] {
        flex: 1;
        padding: 10px 16px;
        font-size: 0.9rem;
    }

/* Category Header Styles */
.menu-category[b-3arybj4vkg] {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding: 0 16px;
}

    .menu-category:first-child[b-3arybj4vkg] {
        margin-top: 0.5rem;
    }

.menu-category-title[b-3arybj4vkg] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94A3B8;
}

.menu-item[b-3arybj4vkg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #334155;
    font-weight: 500;
}

    .menu-item:hover[b-3arybj4vkg] {
        background: rgba(112, 175, 251, 0.1);
        color: #70AFFB;
    }

    .menu-item .rzi[b-3arybj4vkg] {
        font-size: 20px;
    }

    .menu-item .arrow[b-3arybj4vkg] {
        margin-left: auto;
        font-size: 18px;
        color: #94A3B8;
    }

    /* Become a Fighter special styling */
    .menu-item.become-fighter[b-3arybj4vkg] {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(251, 191, 36, 0.08));
        border: 1px dashed #F59E0B;
    }

        .menu-item.become-fighter:hover[b-3arybj4vkg] {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(251, 191, 36, 0.15));
            border-color: #D97706;
        }

        .menu-item.become-fighter .rzi:first-child[b-3arybj4vkg] {
            color: #F59E0B;
        }

/* Logout section spacing */
.menu-logout-section[b-3arybj4vkg] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E2E8F0;
}
/* /Components/Pages/Layout/Components/MobileNav.razor.rz.scp.css */
/* ------------------------------------------------------ */
/* BOTTOM NAV WRAPPER                                     */
/* ------------------------------------------------------ */
.cl-bottom-nav[b-4xsnagcifh] {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    border-top: 1px solid #e0e6eb;
    display: flex;
    z-index: 9999;
}


/* ------------------------------------------------------ */
/* LEFT + RIGHT GROUPS (even spacing, never squeeze)      */
/* ------------------------------------------------------ */
.cl-nav-left[b-4xsnagcifh],
.cl-nav-right[b-4xsnagcifh] {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}




/* ------------------------------------------------------ */
/* CENTER FLOATING ACTION BUTTON (Challenges FAB)         */
/* ------------------------------------------------------ */
.cl-nav-center[b-4xsnagcifh] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -26px;
    text-align: center;
}

/* Floating FAB */
.challenge-fab[b-4xsnagcifh] {
    background: #ffffff;
    border: 3px solid var(--cl-primary, #70AFFB);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12), inset 0 0 8px rgba(112,175,251,0.22);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .challenge-fab:hover[b-4xsnagcifh] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.18), inset 0 0 8px rgba(112,175,251,0.22);
    }

    .challenge-fab:active[b-4xsnagcifh] {
        transform: scale(0.94);
        box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    }

    .challenge-fab.disabled[b-4xsnagcifh],
    .challenge-fab:disabled[b-4xsnagcifh] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

.challenge-fab-wrapper[b-4xsnagcifh] {
    position: relative;
}

    .challenge-fab-wrapper[b-4xsnagcifh]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 68px;
        height: 68px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: rgba(112, 175, 251, 0.32); /* blue glow */
        filter: blur(22px);
        z-index: -1; /* behind button */
    }

challenge-fab[b-4xsnagcifh] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--cl-primary); /* thicker */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.challenge-fab[b-4xsnagcifh]::after {
    content: "";
    position: absolute;
    inset: 4px; /* inner ring spacing */
    border-radius: 50%;
    border: 1px solid rgba(112,175,251,0.35); /* subtle internal line */
    pointer-events: none;
}

.challenge-fab i[b-4xsnagcifh] {
    font-size: 24px;
    color: var(--cl-primary);
}

.challenge-fab[b-4xsnagcifh] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
    border: 2.5px solid var(--cl-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ------------------------------------------------------ */
/* CHALLENGES LABEL (under FAB)                           */
/* ------------------------------------------------------ */
.challenge-label[b-4xsnagcifh] {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-primary, #70AFFB);
}

    .challenge-label.active[b-4xsnagcifh] {
        color: var(--cl-primary-dark, #32677E);
    }


/* Inside stacked layout */
.fab-inner[b-4xsnagcifh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin-top: 2px; /* fine-tune visual centering */
}

    .fab-inner i[b-4xsnagcifh] {
        font-size: 26px;
        color: white;
    }

/* Small text inside circle */
.fab-label[b-4xsnagcifh] {
    font-size: 9px;
    font-weight: 600;
    margin-top: 2px;
    color: white;
    letter-spacing: -0.2px;
}

.challenge-fab:active[b-4xsnagcifh] {
    transform: scale(0.94);
}

.fab-inner i[b-4xsnagcifh] {
    font-size: 22px;
    color: var(--cl-primary, #70AFFB);
}

.fab-label[b-4xsnagcifh] {
    font-size: 9px;
    font-weight: 600;
    margin-top: 1px;
    color: var(--cl-primary, #70AFFB);
    letter-spacing: -0.2px;
}

.challenge-fab[b-4xsnagcifh] {
    box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 0 6px rgba(112,175,251,0.35); /* subtle blue glow */
}
/* /Components/Pages/Layout/Components/MobileNavItem.razor.rz.scp.css */
/* ------------------------------------------------------ */
/* NAV ITEM (icons + labels)                              */
/* ------------------------------------------------------ */
.cl-nav-item[b-ty9x3rhas7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #1e293b;
    cursor: pointer;
    position: relative;
    transition: opacity 0.2s ease;
}

    .cl-nav-item.active[b-ty9x3rhas7] {
        color: #70AFFB;
        font-weight: 600;
    }

    .cl-nav-item.disabled[b-ty9x3rhas7] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .cl-nav-item i[b-ty9x3rhas7] {
        font-size: 26px;
    }

/* ------------------------------------------------------ */
/* UNREAD MESSAGE BADGE                                   */
/* ------------------------------------------------------ */
.cl-nav-badge[b-ty9x3rhas7] {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #EF4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    line-height: 1;
}
/* /Components/Pages/Layout/Components/NavMenuChild.razor.rz.scp.css */
.fp-menu-item[b-lzo5zqruwh],
.fp-menu-child[b-lzo5zqruwh] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: white;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    border: 1px solid #E0E6EB;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .fp-menu-item:hover[b-lzo5zqruwh],
    .fp-menu-child:hover[b-lzo5zqruwh] {
        background: #EEF6FF;
        border-color: #70AFFB;
    }

/* Child items (indented) */
.fp-menu-child[b-lzo5zqruwh] {
    margin-left: 1.25rem;
    background: #F3F5F8;
}

/* Parent item expand icon */
.fp-menu-parent .expand[b-lzo5zqruwh] {
    margin-left: auto;
}

/* Active state */
.fp-menu-item.active[b-lzo5zqruwh],
.fp-menu-child.active[b-lzo5zqruwh] {
    background: #E6F0FE;
    border-color: #70AFFB;
    color: #1E293B;
    font-weight: 600;
    position: relative;
}

    .fp-menu-item.active[b-lzo5zqruwh]::before,
    .fp-menu-child.active[b-lzo5zqruwh]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 4px;
        background: #70AFFB;
        border-radius: 4px;
    }
/* /Components/Pages/Layout/Components/NavMenuItem.razor.rz.scp.css */
.fp-menu-item[b-eekxtrmyjv],
.fp-menu-child[b-eekxtrmyjv] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: white;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    border: 1px solid #E0E6EB;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .fp-menu-item:hover[b-eekxtrmyjv],
    .fp-menu-child:hover[b-eekxtrmyjv] {
        background: #EEF6FF;
        border-color: #70AFFB;
    }

/* Child items (indented) */
.fp-menu-child[b-eekxtrmyjv] {
    margin-left: 1.25rem;
    background: #F3F5F8;
}

/* Parent item expand icon */
.fp-menu-parent .expand[b-eekxtrmyjv] {
    margin-left: auto;
}

/* Active state */
.fp-menu-item.active[b-eekxtrmyjv],
.fp-menu-child.active[b-eekxtrmyjv] {
    background: #E6F0FE;
    border-color: #70AFFB;
    color: #1E293B;
    font-weight: 600;
    position: relative;
}

    .fp-menu-item.active[b-eekxtrmyjv]::before,
    .fp-menu-child.active[b-eekxtrmyjv]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 4px;
        background: #70AFFB;
        border-radius: 4px;
    }
/* /Components/Pages/Layout/Components/NavMenuParent.razor.rz.scp.css */
.fp-menu-item[b-twfzfm9usf],
.fp-menu-child[b-twfzfm9usf] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: white;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    border: 1px solid #E0E6EB;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .fp-menu-item:hover[b-twfzfm9usf],
    .fp-menu-child:hover[b-twfzfm9usf] {
        background: #EEF6FF;
        border-color: #70AFFB;
    }

/* Child items (indented) */
.fp-menu-child[b-twfzfm9usf] {
    margin-left: 1.25rem;
    background: #F3F5F8;
}

/* Parent item expand icon */
.fp-menu-parent .expand[b-twfzfm9usf] {
    margin-left: auto;
}

/* Active state */
.fp-menu-item.active[b-twfzfm9usf],
.fp-menu-child.active[b-twfzfm9usf] {
    background: #E6F0FE;
    border-color: #70AFFB;
    color: #1E293B;
    font-weight: 600;
    position: relative;
}

    .fp-menu-item.active[b-twfzfm9usf]::before,
    .fp-menu-child.active[b-twfzfm9usf]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 4px;
        background: #70AFFB;
        border-radius: 4px;
    }
/* /Components/Pages/Layout/Components/SidebarAccountSection.razor.rz.scp.css */
/* --------------------------------------------
   4. ACCOUNT SECTION
   -------------------------------------------- */
.fp-sidebar-account[b-ddq5glt1my] {
    padding-top: 1rem;
    border-top: 1px solid #E0E6EB;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fp-profile-header[b-ddq5glt1my] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.65rem 0.25rem;
    border-radius: 12px;
    transition: background 0.15s;
}

    .fp-profile-header:hover[b-ddq5glt1my] {
        background: #EEF6FF;
    }

.fp-profile-info[b-ddq5glt1my] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fp-profile-name[b-ddq5glt1my] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.9rem;
}

.fp-profile-email[b-ddq5glt1my] {
    font-size: 0.8rem;
    color: #6C757D;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trial pill */
.fp-trial-pill[b-ddq5glt1my] {
    background: #F97316;
    color: white;
    padding: 0.25rem 0.75rem;
    margin-top: 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    width: fit-content;
}

/* Logout button */
.fp-logout-btn[b-ddq5glt1my] {
    width: 100%;
    margin-top: 1rem;
    background: #EF4444 !important;
    border-radius: 16px !important;
    border: none;
    color: white !important;
    padding: 0.65rem !important;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

    .fp-logout-btn:hover[b-ddq5glt1my] {
        background: #DC2626 !important;
    }


/* Footer */
.menu-footer[b-ddq5glt1my] {
    text-align: center;
    padding: 1rem 0 0.5rem;
    font-size: 0.75rem;
    color: #94A3B8;
}
/* /Components/Pages/Layout/Components/SidebarMenu.razor.rz.scp.css */

.fp-menu[b-va70s974a5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    overflow-y: auto;
}
/* --------------------------------------------
   3. BECOME FIGHTER BUTTON (Special)
   -------------------------------------------- */
.become-fighter-btn[b-va70s974a5] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
    border-color: #F59E0B !important;
}

    .become-fighter-btn:hover[b-va70s974a5] {
        background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%) !important;
        border-color: #D97706 !important;
    }

    .become-fighter-btn .rzi[b-va70s974a5] {
        color: #D97706;
    }



.fp-menu-item[b-va70s974a5],
.fp-menu-child[b-va70s974a5] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: white;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    border: 1px solid #E0E6EB;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .fp-menu-item:hover[b-va70s974a5],
    .fp-menu-child:hover[b-va70s974a5] {
        background: #EEF6FF;
        border-color: #70AFFB;
    }

/* Child items (indented) */
.fp-menu-child[b-va70s974a5] {
    margin-left: 1.25rem;
    background: #F3F5F8;
}

/* "More" toggle inside coaching submenu */
.fp-menu-more[b-va70s974a5] {
    justify-content: center;
    color: #64748B;
    font-size: 0.85rem;
    border-style: dashed;
    background: transparent;
}

    .fp-menu-more:hover[b-va70s974a5] {
        color: #1E293B;
        background: #EEF6FF;
    }

/* Parent item expand icon */
.fp-menu-parent .expand[b-va70s974a5] {
    margin-left: auto;
}

/* Active state */
.fp-menu-item.active[b-va70s974a5],
.fp-menu-child.active[b-va70s974a5] {
    background: #E6F0FE;
    border-color: #70AFFB;
    color: #1E293B;
    font-weight: 600;
    position: relative;
}

    .fp-menu-item.active[b-va70s974a5]::before,
    .fp-menu-child.active[b-va70s974a5]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 4px;
        background: #70AFFB;
        border-radius: 4px;
    }
/* /Components/Pages/Layout/MainLayout.razor.rz.scp.css */
/* ============================================
   MAIN LAYOUT - SIDEBAR STYLES
   Scoped styles for the main layout sidebar
   ============================================ */

/* --------------------------------------------
   1. SIDEBAR STRUCTURE
   -------------------------------------------- */
.fp-sidebar-wrapper[b-ujkderpndn] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #F8F9FB;
}

.fp-sidebar[b-ujkderpndn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem;
    background: #F8F9FB;
}




/* /Components/Pages/Layout/PublicLayout.razor.rz.scp.css */
/* ============================================
   PublicLayout Scroll Container
   Works with iOS PWA fixes - since html/body are 
   position:fixed, this becomes the scroll container
   ============================================ */

.public-layout-scroll-container[b-i5ntpxxxvd] {
    /* Make this the scroll container for public/landing pages */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    
    /* Prevent bounce/pull-to-refresh but allow normal scroll */
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .public-layout-scroll-container[b-i5ntpxxxvd] {
        /* Use CSS variable set by viewport-fixes.js if available */
        height: var(--app-height, 100vh);
    }
}
/* /Components/Pages/OnboardingFeature/Components/PaymentStep.razor.rz.scp.css */
/* ============================================
   PAYMENT STEP - Clean, Compact Design
   ============================================ */

.payment-step[b-d0rtjeu9xi] {
    max-width: 420px;
    margin: 0 auto;
    padding: 0rem;
}

/* Step Header */
.step-header[b-d0rtjeu9xi] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.step-header h4[b-d0rtjeu9xi] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.step-header p[b-d0rtjeu9xi] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* Loading & Error States */
.loading-state[b-d0rtjeu9xi],
.error-state[b-d0rtjeu9xi] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.loading-state p[b-d0rtjeu9xi],
.error-state p[b-d0rtjeu9xi] {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.error-state[b-d0rtjeu9xi]  .rzi {
    font-size: 3rem;
    color: #f59e0b;
}

/* ===== FIGHTER PLAN CARD (compact centered) ===== */
.fighter-plan-card[b-d0rtjeu9xi] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fighter-plan-card[b-d0rtjeu9xi]::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(112, 175, 251, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.fighter-plan-card h3[b-d0rtjeu9xi] {
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
    position: relative;
    z-index: 1;
}

.fighter-tagline[b-d0rtjeu9xi] {
    color: #94a3b8;
    font-size: 0.8rem;
    margin: 0 0 1rem;
    position: relative;
    z-index: 1;
}

.fighter-plan-features[b-d0rtjeu9xi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0 auto 1rem;
    max-width: fit-content;
    position: relative;
    z-index: 1;
}

.fighter-plan-feature[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1;
    font-size: 0.8rem;
}

.fighter-plan-feature[b-d0rtjeu9xi]  .rzi {
    color: #70AFFB;
    font-size: 1rem;
}

.fighter-price-box[b-d0rtjeu9xi] {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.trial-pill[b-d0rtjeu9xi] {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.fighter-price-display[b-d0rtjeu9xi] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
}

.fighter-price-display .currency[b-d0rtjeu9xi] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.fighter-price-display .amount[b-d0rtjeu9xi] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.fighter-price-display .period[b-d0rtjeu9xi] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.price-free-display[b-d0rtjeu9xi] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-free-display .free-text[b-d0rtjeu9xi] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #22c55e;
}

.annual-note[b-d0rtjeu9xi] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* ===== ORGANIZATION PLAN CARD ===== */
.plan-card[b-d0rtjeu9xi] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.plan-card-header[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.plan-icon[b-d0rtjeu9xi] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #70AFFB, #3b82f6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plan-icon .rzi[b-d0rtjeu9xi] {
    color: #fff;
    font-size: 1.5rem;
}

.plan-info h3[b-d0rtjeu9xi] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
}

.trial-badge[b-d0rtjeu9xi] {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.plan-price-display[b-d0rtjeu9xi] {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1rem;
}

.price-amount[b-d0rtjeu9xi] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1e293b;
}

.price-period[b-d0rtjeu9xi] {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.price-free[b-d0rtjeu9xi] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.free-label[b-d0rtjeu9xi] {
    font-size: 2rem;
    font-weight: 800;
    color: #22c55e;
}

.was-price[b-d0rtjeu9xi] {
    font-size: 0.85rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.plan-features[b-d0rtjeu9xi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
}

.feature .rzi[b-d0rtjeu9xi] {
    color: #70AFFB;
    font-size: 1rem;
}

/* Billing Toggle */
.billing-section[b-d0rtjeu9xi] {
    margin-bottom: 1rem;
}

.section-label[b-d0rtjeu9xi] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

.billing-toggle[b-d0rtjeu9xi] {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}

.billing-btn[b-d0rtjeu9xi] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.billing-btn:hover[b-d0rtjeu9xi] {
    color: #1e293b;
}

.billing-btn.active[b-d0rtjeu9xi] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.billing-label[b-d0rtjeu9xi] {
    font-size: 0.85rem;
}

.save-badge[b-d0rtjeu9xi] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #22c55e;
    background: #dcfce7;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* Promo Code Section */
.promo-section[b-d0rtjeu9xi] {
    margin-bottom: 1rem;
}

.promo-input-row[b-d0rtjeu9xi] {
    display: flex;
    gap: 0.5rem;
}

.promo-input[b-d0rtjeu9xi] {
    flex: 1;
}

.promo-hint[b-d0rtjeu9xi] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0.375rem 0 0;
}

.promo-error[b-d0rtjeu9xi] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.promo-applied[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
}

.promo-info[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #166534;
}

.promo-info .rzi[b-d0rtjeu9xi] {
    color: #22c55e;
}

.remove-btn[b-d0rtjeu9xi] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-btn:hover[b-d0rtjeu9xi] {
    background: #fee2e2;
    color: #dc2626;
}

.remove-btn .rzi[b-d0rtjeu9xi] {
    font-size: 1rem;
}

/* Trial Notice */
.trial-notice[b-d0rtjeu9xi] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: #0369a1;
}

.trial-notice .rzi[b-d0rtjeu9xi] {
    color: #0ea5e9;
    flex-shrink: 0;
}

/* Payment Section */
.payment-section[b-d0rtjeu9xi] {
    margin-bottom: 1.5rem;
}

.free-notice[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.free-notice .rzi[b-d0rtjeu9xi] {
    font-size: 2rem;
    color: #22c55e;
}

.free-notice strong[b-d0rtjeu9xi] {
    color: #166534;
    display: block;
    margin-bottom: 0.125rem;
}

.free-notice p[b-d0rtjeu9xi] {
    margin: 0;
    font-size: 0.8rem;
    color: #15803d;
}

.stripe-placeholder[b-d0rtjeu9xi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.stripe-placeholder .rzi[b-d0rtjeu9xi] {
    font-size: 1.5rem;
    color: #94a3b8;
}

.stripe-placeholder span[b-d0rtjeu9xi] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.stripe-placeholder small[b-d0rtjeu9xi] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Actions */
.step-actions[b-d0rtjeu9xi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.step-actions > :first-child[b-d0rtjeu9xi] {
    /* Back button */
}

.step-actions > :last-child[b-d0rtjeu9xi] {
    /* Primary button - push to right */
    margin-left: auto;
}

.terms-text[b-d0rtjeu9xi] {
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 1rem;
    margin-bottom: 0;
}

.terms-text a[b-d0rtjeu9xi] {
    color: #64748b;
    text-decoration: underline;
}

.terms-text a:hover[b-d0rtjeu9xi] {
    color: #1e293b;
}

/* Stripe Card Element */
.stripe-card-section[b-d0rtjeu9xi] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
}

.card-helper[b-d0rtjeu9xi] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.stripe-card-element[b-d0rtjeu9xi] {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stripe-card-element:focus-within[b-d0rtjeu9xi] {
    border-color: #70AFFB;
    box-shadow: 0 0 0 3px rgba(112, 175, 251, 0.15);
}

.stripe-card-errors[b-d0rtjeu9xi] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    min-height: 1.2rem;
}

.stripe-loading[b-d0rtjeu9xi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    text-align: center;
}

.stripe-loading span[b-d0rtjeu9xi] {
    font-size: 0.85rem;
    color: #64748b;
}

.stripe-secure-note[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.stripe-secure-note[b-d0rtjeu9xi]  .rzi {
    font-size: 0.9rem;
    color: #22c55e;
}

/* Skip Payment Note */
.skip-note[b-d0rtjeu9xi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.skip-note[b-d0rtjeu9xi]  .rzi {
    font-size: 1rem;
    color: #94a3b8;
}
/* /Components/Pages/OnboardingFeature/Pages/ClientOnboarding.razor.rz.scp.css */
/* ==========================================================
   ClientOnboarding.razor - Scoped CSS (CSS Isolation)
   Version: 1.0.1 - Isolated styles for client onboarding flow
   ========================================================== */

/* Container - full viewport gradient background */
.onboarding-container[b-cy01ggrv57] {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - accounts for mobile browser chrome */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Ensure no extra space from parent elements */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Card - main white content area */
.onboarding-card[b-cy01ggrv57] {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-sizing: border-box;
}

/* Progress bar header */
.progress-header[b-cy01ggrv57] {
    text-align: center;
}

.progress-bar-container[b-cy01ggrv57] {
    width: 100%;
    height: 8px;
    background: #E0E6EB;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar-fill[b-cy01ggrv57] {
    height: 100%;
    background: linear-gradient(90deg, #70AFFB 0%, #4A9FEB 100%);
    transition: width 0.3s ease;
}

.progress-text[b-cy01ggrv57] {
    font-size: 0.9rem;
    color: #64748B;
    font-weight: 600;
}

/* Step content animation */
.step-content[b-cy01ggrv57] {
    animation: fadeIn-b-cy01ggrv57 0.3s ease;
}

@keyframes fadeIn-b-cy01ggrv57 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================
   Child Component Styles (using ::deep for CSS isolation)
   These styles apply to elements rendered by child components
   ========================================================== */

/* Sport selection grid - rendered in ChildContent */
[b-cy01ggrv57] .sport-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Sport chip buttons */
[b-cy01ggrv57] .sport-chip {
    border: 1px solid #E0E6EB;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: #374151;
}

[b-cy01ggrv57] .sport-chip:hover {
    border-color: #70AFFB;
    background: #f0f7ff;
}

[b-cy01ggrv57] .sport-chip.selected {
    background: #70AFFB;
    color: white;
    border-color: #70AFFB;
}

[b-cy01ggrv57] .sport-chip.selected:hover {
    background: #5a9fea;
}

/* ==========================================================
   Responsive adjustments
   ========================================================== */

@media (max-width: 768px) {
    .onboarding-container[b-cy01ggrv57] {
        padding: 0.75rem;
        align-items: flex-start;
        padding-top: 1rem;
    }

    .onboarding-card[b-cy01ggrv57] {
        padding: 1.5rem;
        border-radius: 16px;
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }

    [b-cy01ggrv57] .sport-grid {
        gap: 0.375rem;
    }

    [b-cy01ggrv57] .sport-chip {
        padding: 0.375rem 0.625rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .onboarding-container[b-cy01ggrv57] {
        padding: 0;
        align-items: stretch;
    }

    .onboarding-card[b-cy01ggrv57] {
        padding: 1.25rem;
        border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
    }
}
/* /Components/Pages/OrganizationFeature/Components/AddTeamCoachesDialog.razor.rz.scp.css */
.add-coach-dialog[b-hifllx56mp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 70vh;
    background: #FFFFFF;
}

/* ===== HEADER ===== */
.dialog-header[b-hifllx56mp] {
    padding: 0 0 1rem;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 1rem;
}

.dialog-header h3[b-hifllx56mp] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.dialog-header p[b-hifllx56mp] {
    margin: 0;
    font-size: 0.875rem;
    color: #64748B;
}

/* ===== LOADING STATE ===== */
.loading-state[b-hifllx56mp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.loading-spinner[b-hifllx56mp] {
    width: 40px;
    height: 40px;
    border: 3px solid #E2E8F0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin-b-hifllx56mp 0.8s linear infinite;
}

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

.loading-state p[b-hifllx56mp] {
    color: #64748B;
    font-size: 0.95rem;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-hifllx56mp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-icon[b-hifllx56mp] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-icon i[b-hifllx56mp] {
    font-size: 40px;
    color: #94A3B8;
}

.empty-state h4[b-hifllx56mp] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
}

.empty-state p[b-hifllx56mp] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.95rem;
}

/* ===== SEARCH ===== */
.search-container[b-hifllx56mp] {
    position: relative;
    margin-bottom: 0.75rem;
}

.search-icon[b-hifllx56mp] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94A3B8;
    pointer-events: none;
}

.search-input[b-hifllx56mp] {
    width: 100%;
    padding: 0.875rem 2.75rem 0.875rem 2.75rem;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1rem;
    color: #1E293B;
    background: #F8FAFC;
    transition: all 0.2s;
    box-sizing: border-box;
}

.search-input:focus[b-hifllx56mp] {
    outline: none;
    border-color: #3B82F6;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input[b-hifllx56mp]::placeholder {
    color: #94A3B8;
}

.clear-btn[b-hifllx56mp] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: #E2E8F0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.clear-btn i[b-hifllx56mp] {
    font-size: 16px;
    color: #64748B;
}

.clear-btn:hover[b-hifllx56mp] {
    background: #CBD5E1;
}

/* ===== SELECTION BAR ===== */
.selection-bar[b-hifllx56mp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: #EFF6FF;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.selection-count[b-hifllx56mp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1D4ED8;
}

.clear-selection[b-hifllx56mp] {
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #3B82F6;
    cursor: pointer;
    font-weight: 500;
    padding: 0;
}

.clear-selection:hover[b-hifllx56mp] {
    text-decoration: underline;
}

/* ===== COACH LIST ===== */
.coach-list[b-hifllx56mp] {
    flex: 1;
    overflow-y: auto;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    min-height: 200px;
    max-height: 320px;
}

.no-results[b-hifllx56mp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #94A3B8;
}

.no-results i[b-hifllx56mp] {
    font-size: 40px;
    margin-bottom: 0.5rem;
}

.no-results p[b-hifllx56mp] {
    margin: 0;
    font-size: 0.95rem;
}

/* ===== COACH CARD ===== */
.coach-card[b-hifllx56mp] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 14px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.coach-card:active[b-hifllx56mp] {
    transform: scale(0.98);
}

.coach-card:hover[b-hifllx56mp] {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.coach-card.selected[b-hifllx56mp] {
    border-color: #3B82F6;
    background: #EFF6FF;
}

.coach-avatar[b-hifllx56mp] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.coach-avatar img[b-hifllx56mp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.coach-avatar .initials-fallback[b-hifllx56mp] {
    display: none;
}

.coach-avatar.selected[b-hifllx56mp] {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.check-icon[b-hifllx56mp] {
    font-size: 24px;
}

.coach-details[b-hifllx56mp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.coach-name[b-hifllx56mp] {
    font-weight: 600;
    font-size: 1rem;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-meta[b-hifllx56mp] {
    font-size: 0.8rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-meta.empty[b-hifllx56mp] {
    font-style: italic;
    color: #94A3B8;
}

.select-indicator[b-hifllx56mp] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.checkbox[b-hifllx56mp] {
    width: 24px;
    height: 24px;
    border: 2px solid #CBD5E1;
    border-radius: 6px;
    background: white;
    transition: all 0.15s;
}

/* ===== ROLE DROPDOWN ===== */
.role-dropdown[b-hifllx56mp] {
    position: relative;
    display: flex;
    align-items: center;
}

.role-select[b-hifllx56mp] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 2px solid #3B82F6;
    border-radius: 10px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    min-width: 130px;
    transition: all 0.15s;
}

.role-select:focus[b-hifllx56mp] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.role-select:hover[b-hifllx56mp] {
    background: #DBEAFE;
}

.dropdown-arrow[b-hifllx56mp] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #1D4ED8;
    pointer-events: none;
}

/* ===== FOOTER ===== */
.dialog-footer[b-hifllx56mp] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #E2E8F0;
}

.btn-cancel[b-hifllx56mp],
.btn-primary[b-hifllx56mp],
.btn-secondary[b-hifllx56mp] {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s;
    border: none;
}

.btn-cancel[b-hifllx56mp] {
    background: #F1F5F9;
    color: #475569;
}

.btn-cancel:hover[b-hifllx56mp] {
    background: #E2E8F0;
}

.btn-secondary[b-hifllx56mp] {
    background: #E2E8F0;
    color: #1E293B;
}

.btn-secondary:hover[b-hifllx56mp] {
    background: #CBD5E1;
}

.btn-primary[b-hifllx56mp] {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover:not(.disabled)[b-hifllx56mp] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.btn-primary:active:not(.disabled)[b-hifllx56mp] {
    transform: translateY(0);
}

.btn-primary.disabled[b-hifllx56mp] {
    background: #CBD5E1;
    color: #94A3B8;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-primary i[b-hifllx56mp] {
    font-size: 20px;
}

.btn-spinner[b-hifllx56mp] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-hifllx56mp 0.8s linear infinite;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
    .add-coach-dialog[b-hifllx56mp] {
        max-height: 80vh;
    }

    .dialog-header h3[b-hifllx56mp] {
        font-size: 1.15rem;
    }

    .coach-card[b-hifllx56mp] {
        padding: 0.75rem;
    }

    .coach-avatar[b-hifllx56mp] {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    .coach-name[b-hifllx56mp] {
        font-size: 0.95rem;
    }

    .role-select[b-hifllx56mp] {
        min-width: 110px;
        font-size: 0.8rem;
        padding: 0.4rem 1.75rem 0.4rem 0.625rem;
    }

    .btn-cancel[b-hifllx56mp],
    .btn-primary[b-hifllx56mp] {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}
/* /Components/Pages/OrganizationFeature/Components/AddTeamFightersDialog.razor.rz.scp.css */
.add-fighter-dialog[b-yfuoeleg3s] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 70vh;
    background: #FFFFFF;
    padding:1rem;
}

/* ===== HEADER ===== */
.dialog-header[b-yfuoeleg3s] {
    padding: 0 0 1rem;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 1rem;
}

.dialog-header h3[b-yfuoeleg3s] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.dialog-header p[b-yfuoeleg3s] {
    margin: 0;
    font-size: 0.875rem;
    color: #64748B;
}

/* ===== LOADING STATE ===== */
.loading-state[b-yfuoeleg3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.loading-spinner[b-yfuoeleg3s] {
    width: 40px;
    height: 40px;
    border: 3px solid #E2E8F0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin-b-yfuoeleg3s 0.8s linear infinite;
}

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

.loading-state p[b-yfuoeleg3s] {
    color: #64748B;
    font-size: 0.95rem;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-yfuoeleg3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-icon[b-yfuoeleg3s] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-icon i[b-yfuoeleg3s] {
    font-size: 40px;
    color: #94A3B8;
}

.empty-state h4[b-yfuoeleg3s] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
}

.empty-state p[b-yfuoeleg3s] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.95rem;
}

/* ===== SEARCH ===== */
.search-container[b-yfuoeleg3s] {
    position: relative;
    margin-bottom: 0.75rem;
}

.search-icon[b-yfuoeleg3s] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94A3B8;
    pointer-events: none;
}

.search-input[b-yfuoeleg3s] {
    width: 100%;
    padding: 0.875rem 2.75rem 0.875rem 2.75rem;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1rem;
    color: #1E293B;
    background: #F8FAFC;
    transition: all 0.2s;
    box-sizing: border-box;
}

.search-input:focus[b-yfuoeleg3s] {
    outline: none;
    border-color: #3B82F6;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input[b-yfuoeleg3s]::placeholder {
    color: #94A3B8;
}

.clear-btn[b-yfuoeleg3s] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: #E2E8F0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.clear-btn i[b-yfuoeleg3s] {
    font-size: 16px;
    color: #64748B;
}

.clear-btn:hover[b-yfuoeleg3s] {
    background: #CBD5E1;
}

/* ===== SELECTION BAR ===== */
.selection-bar[b-yfuoeleg3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: #EFF6FF;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.selection-count[b-yfuoeleg3s] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1D4ED8;
}

.clear-selection[b-yfuoeleg3s] {
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #3B82F6;
    cursor: pointer;
    font-weight: 500;
    padding: 0;
}

.clear-selection:hover[b-yfuoeleg3s] {
    text-decoration: underline;
}

/* ===== FIGHTER LIST ===== */
.fighter-list[b-yfuoeleg3s] {
    flex: 1;
    overflow-y: auto;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    min-height: 200px;
    max-height: 320px;
}

.no-results[b-yfuoeleg3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #94A3B8;
}

.no-results i[b-yfuoeleg3s] {
    font-size: 40px;
    margin-bottom: 0.5rem;
}

.no-results p[b-yfuoeleg3s] {
    margin: 0;
    font-size: 0.95rem;
}

/* ===== FIGHTER CARD ===== */
.fighter-card[b-yfuoeleg3s] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 14px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.fighter-card:active[b-yfuoeleg3s] {
    transform: scale(0.98);
}

.fighter-card:hover[b-yfuoeleg3s] {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.fighter-card.selected[b-yfuoeleg3s] {
    border-color: #3B82F6;
    background: #EFF6FF;
}

.fighter-avatar[b-yfuoeleg3s] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.fighter-avatar.selected[b-yfuoeleg3s] {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}

.check-icon[b-yfuoeleg3s] {
    font-size: 24px;
}

.fighter-details[b-yfuoeleg3s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fighter-name[b-yfuoeleg3s] {
    font-weight: 600;
    font-size: 1rem;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fighter-meta[b-yfuoeleg3s] {
    font-size: 0.8rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-indicator[b-yfuoeleg3s] {
    flex-shrink: 0;
}

.checkbox[b-yfuoeleg3s] {
    width: 24px;
    height: 24px;
    border: 2px solid #CBD5E1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.checkbox.checked[b-yfuoeleg3s] {
    background: #3B82F6;
    border-color: #3B82F6;
}

.checkbox i[b-yfuoeleg3s] {
    font-size: 16px;
    color: white;
}

/* ===== FOOTER ===== */
.dialog-footer[b-yfuoeleg3s] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #E2E8F0;
}

.btn-cancel[b-yfuoeleg3s],
.btn-primary[b-yfuoeleg3s],
.btn-secondary[b-yfuoeleg3s] {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s;
    border: none;
}

.btn-cancel[b-yfuoeleg3s] {
    background: #F1F5F9;
    color: #475569;
}

.btn-cancel:hover[b-yfuoeleg3s] {
    background: #E2E8F0;
}

.btn-secondary[b-yfuoeleg3s] {
    background: #E2E8F0;
    color: #1E293B;
}

.btn-secondary:hover[b-yfuoeleg3s] {
    background: #CBD5E1;
}

.btn-primary[b-yfuoeleg3s] {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover:not(.disabled)[b-yfuoeleg3s] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.btn-primary:active:not(.disabled)[b-yfuoeleg3s] {
    transform: translateY(0);
}

.btn-primary.disabled[b-yfuoeleg3s] {
    background: #CBD5E1;
    color: #94A3B8;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-primary i[b-yfuoeleg3s] {
    font-size: 20px;
}

.btn-spinner[b-yfuoeleg3s] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-yfuoeleg3s 0.8s linear infinite;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
    .add-fighter-dialog[b-yfuoeleg3s] {
        max-height: 80vh;
    }

    .dialog-header h3[b-yfuoeleg3s] {
        font-size: 1.15rem;
    }

    .fighter-card[b-yfuoeleg3s] {
        padding: 0.75rem;
    }

    .fighter-avatar[b-yfuoeleg3s] {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    .fighter-name[b-yfuoeleg3s] {
        font-size: 0.95rem;
    }

    .btn-cancel[b-yfuoeleg3s],
    .btn-primary[b-yfuoeleg3s] {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}
/* /Components/Pages/OrganizationFeature/Components/CoachesTab.razor.rz.scp.css */
.tab-section[b-hahb8n3jrn] {
    padding: 1.25rem;
}

.section-header[b-hahb8n3jrn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-header h3[b-hahb8n3jrn] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
}

.add-btn[b-hahb8n3jrn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.add-btn:hover[b-hahb8n3jrn] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-btn i[b-hahb8n3jrn] {
    font-size: 18px;
}

/* Empty State */
.empty-state[b-hahb8n3jrn] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-hahb8n3jrn] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-hahb8n3jrn] {
    font-size: 40px;
    color: #94A3B8;
}

.empty-state h4[b-hahb8n3jrn] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #1E293B;
}

.empty-state p[b-hahb8n3jrn] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.95rem;
}

.primary-btn[b-hahb8n3jrn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.primary-btn:hover[b-hahb8n3jrn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

/* Coach Cards */
.coach-cards[b-hahb8n3jrn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.coach-card[b-hahb8n3jrn] {
background: white;
border-radius: 16px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.coach-card.head-coach[b-hahb8n3jrn] {
    background: #FFFBEB;
    border-color: #FCD34D;
}

.coach-card-content[b-hahb8n3jrn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.coach-avatar[b-hahb8n3jrn],
.coach-avatar-img[b-hahb8n3jrn] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coach-avatar[b-hahb8n3jrn] {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.coach-avatar.head[b-hahb8n3jrn] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.coach-avatar-img[b-hahb8n3jrn] {
    object-fit: cover;
    border: 2px solid #E2E8F0;
}

.coach-avatar-img.head[b-hahb8n3jrn] {
    border-color: #FCD34D;
}

.coach-details[b-hahb8n3jrn] {
    flex: 1;
    min-width: 0;
}

.coach-name[b-hahb8n3jrn] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
}

.coach-role[b-hahb8n3jrn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: #64748B;
}

.coach-role.head[b-hahb8n3jrn] {
    color: #D97706;
    font-weight: 600;
}

.coach-role i[b-hahb8n3jrn] {
    font-size: 14px;
}

.coach-since[b-hahb8n3jrn] {
    font-size: 0.75rem;
    color: #94A3B8;
}

.coach-card-actions[b-hahb8n3jrn] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.icon-btn[b-hahb8n3jrn] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn.danger[b-hahb8n3jrn] {
    color: #EF4444;
}

.icon-btn.danger:hover[b-hahb8n3jrn] {
    background: #FEE2E2;
}

.icon-btn.warning[b-hahb8n3jrn] {
    color: #F59E0B;
}

.icon-btn.warning:hover[b-hahb8n3jrn] {
    background: #FEF3C7;
}

.icon-btn i[b-hahb8n3jrn] {
    font-size: 18px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .tab-section[b-hahb8n3jrn] {
        padding: 1rem;
    }

    .section-header h3[b-hahb8n3jrn] {
        font-size: 1rem;
    }

    .add-btn span[b-hahb8n3jrn] {
        display: none;
    }

    .add-btn[b-hahb8n3jrn] {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .coach-cards[b-hahb8n3jrn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OrganizationFeature/Components/FightCampsTab.razor.rz.scp.css */
.tab-section[b-zvpzyoa2ns] {
    padding: 1.25rem;
}

.section-header[b-zvpzyoa2ns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-header h3[b-zvpzyoa2ns] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
}

.add-btn[b-zvpzyoa2ns] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.add-btn:hover[b-zvpzyoa2ns] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-btn i[b-zvpzyoa2ns] {
    font-size: 18px;
}

/* ===== CAMPS SECTIONS ===== */
.camps-section[b-zvpzyoa2ns] {
    margin-bottom: 1.5rem;
}

.camps-section:last-child[b-zvpzyoa2ns] {
    margin-bottom: 0;
}

.camps-section-header[b-zvpzyoa2ns] {
    margin-bottom: 0.75rem;
}

.camps-section-title[b-zvpzyoa2ns] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #64748B;
}

.camps-section-title i[b-zvpzyoa2ns] {
    font-size: 16px;
}

.camps-count[b-zvpzyoa2ns] {
    background: #E2E8F0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.active-section .camps-count[b-zvpzyoa2ns] {
    background: #DCFCE7;
    color: #16A34A;
}

/* Pulse dot for active camps */
.pulse-dot[b-zvpzyoa2ns] {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    animation: pulse-b-zvpzyoa2ns 2s infinite;
}

@keyframes pulse-b-zvpzyoa2ns {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* ===== ACTIVE CAMP CARDS ===== */
.active-camp-cards[b-zvpzyoa2ns] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.active-camp-card[b-zvpzyoa2ns] {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 2px solid #BBF7D0;
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.active-camp-card:hover[b-zvpzyoa2ns] {
    border-color: #22C55E;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
}

.active-camp-header[b-zvpzyoa2ns] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.camp-fighter-avatar[b-zvpzyoa2ns] {
    flex-shrink: 0;
}

.camp-fighter-avatar .fighter-img[b-zvpzyoa2ns],
.camp-fighter-avatar .fighter-placeholder[b-zvpzyoa2ns] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #22C55E;
}

.camp-fighter-avatar .fighter-img[b-zvpzyoa2ns] {
    object-fit: cover;
}

.camp-fighter-avatar .fighter-placeholder[b-zvpzyoa2ns] {
    background: linear-gradient(135deg, #22C55E, #16A34A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.active-camp-info[b-zvpzyoa2ns] {
    flex: 1;
    min-width: 0;
}

.active-camp-name[b-zvpzyoa2ns] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
}

.active-camp-fighter[b-zvpzyoa2ns] {
    font-size: 0.85rem;
    color: #16A34A;
}

.camp-countdown[b-zvpzyoa2ns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #BBF7D0;
    min-width: 50px;
}

.camp-countdown.urgent[b-zvpzyoa2ns] {
    background: #FEF2F2;
    border-color: #FECACA;
}

.camp-countdown.urgent .countdown-value[b-zvpzyoa2ns] {
    color: #DC2626;
}

.countdown-value[b-zvpzyoa2ns] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #166534;
    line-height: 1;
}

.countdown-label[b-zvpzyoa2ns] {
    font-size: 0.65rem;
    color: #64748B;
    text-transform: uppercase;
}

.active-camp-details[b-zvpzyoa2ns] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.camp-opponent[b-zvpzyoa2ns],
.camp-event-info[b-zvpzyoa2ns] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #166534;
}

.camp-opponent i[b-zvpzyoa2ns],
.camp-event-info i[b-zvpzyoa2ns] {
    font-size: 16px;
    color: #22C55E;
}

.event-name[b-zvpzyoa2ns] {
    color: #16A34A;
    font-weight: 500;
}

.active-camp-progress[b-zvpzyoa2ns] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.progress-bar-bg[b-zvpzyoa2ns] {
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill[b-zvpzyoa2ns] {
    height: 100%;
    background: linear-gradient(90deg, #22C55E, #16A34A);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-stats[b-zvpzyoa2ns] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #16A34A;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-zvpzyoa2ns] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-zvpzyoa2ns] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-zvpzyoa2ns] {
    font-size: 40px;
    color: #94A3B8;
}

.empty-state h4[b-zvpzyoa2ns] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #1E293B;
}

.empty-state p[b-zvpzyoa2ns] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.95rem;
}

.primary-btn[b-zvpzyoa2ns] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.primary-btn:hover[b-zvpzyoa2ns] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

/* ===== OTHER CAMP CARDS ===== */
.camp-cards[b-zvpzyoa2ns] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.camp-card[b-zvpzyoa2ns] {
background: white;
border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 4px solid #CBD5E1;
}

.camp-card:hover[b-zvpzyoa2ns] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.camp-card.active[b-zvpzyoa2ns],
.camp-card.fight-week[b-zvpzyoa2ns] {
    border-left-color: #22C55E;
}

.camp-card.completed[b-zvpzyoa2ns] {
    border-left-color: #3B82F6;
}

.camp-card.cancelled[b-zvpzyoa2ns] {
    border-left-color: #EF4444;
}

.camp-card.planning[b-zvpzyoa2ns] {
    border-left-color: #F59E0B;
}

.camp-card-header[b-zvpzyoa2ns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.camp-status-badge[b-zvpzyoa2ns] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.camp-status-badge.active[b-zvpzyoa2ns],
.camp-status-badge.fight-week[b-zvpzyoa2ns] {
    background: #DCFCE7;
    color: #16A34A;
}

.camp-status-badge.completed[b-zvpzyoa2ns] {
    background: #DBEAFE;
    color: #2563EB;
}

.camp-status-badge.cancelled[b-zvpzyoa2ns] {
    background: #FEE2E2;
    color: #DC2626;
}

.camp-status-badge.planning[b-zvpzyoa2ns] {
    background: #FEF3C7;
    color: #D97706;
}

.camp-arrow[b-zvpzyoa2ns] {
    color: #94A3B8;
    font-size: 20px;
}

.camp-name[b-zvpzyoa2ns] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
}

.camp-fighter-name[b-zvpzyoa2ns],
.camp-dates[b-zvpzyoa2ns] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #64748B;
    margin-bottom: 0.25rem;
}

.camp-fighter-name i[b-zvpzyoa2ns],
.camp-dates i[b-zvpzyoa2ns] {
    font-size: 16px;
}

/* ===== CAMP ACTIONS ===== */
.camp-actions[b-zvpzyoa2ns] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-view[b-zvpzyoa2ns] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: none;
    background: white;
    color: #3B82F6;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
    border: 1px solid #E2E8F0;
}

.btn-view:hover[b-zvpzyoa2ns] {
    background: #EFF6FF;
    border-color: #3B82F6;
}

.btn-view i[b-zvpzyoa2ns] {
    font-size: 18px;
}

.btn-deactivate[b-zvpzyoa2ns] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: none;
    background: #FEE2E2;
    color: #DC2626;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.btn-deactivate:hover[b-zvpzyoa2ns] {
    background: #FECACA;
}

.btn-deactivate i[b-zvpzyoa2ns] {
    font-size: 18px;
}

/* Active camp card actions styling */
.active-camp-card .camp-actions[b-zvpzyoa2ns] {
    border-top-color: rgba(34, 197, 94, 0.2);
}

.active-camp-card .btn-view[b-zvpzyoa2ns] {
    background: white;
    color: #166534;
    border-color: #BBF7D0;
}

.active-camp-card .btn-view:hover[b-zvpzyoa2ns] {
    background: #F0FDF4;
    border-color: #22C55E;
}

/* ===== CONFIRM DIALOG ===== */
.confirm-overlay[b-zvpzyoa2ns] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn-b-zvpzyoa2ns 0.2s ease-out;
}

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

.confirm-dialog[b-zvpzyoa2ns] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    animation: slideUp-b-zvpzyoa2ns 0.3s ease-out;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

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

.confirm-icon[b-zvpzyoa2ns] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.confirm-icon.warning[b-zvpzyoa2ns] {
    background: #FEF3C7;
}

.confirm-icon.warning i[b-zvpzyoa2ns] {
    font-size: 32px;
    color: #F59E0B;
}

.confirm-dialog h4[b-zvpzyoa2ns] {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.confirm-dialog p[b-zvpzyoa2ns] {
    margin: 0 0 0.5rem;
    color: #475569;
    font-size: 0.95rem;
}

.confirm-subtitle[b-zvpzyoa2ns] {
    color: #64748B !important;
    font-size: 0.85rem !important;
    margin-bottom: 1.5rem !important;
}

.confirm-actions[b-zvpzyoa2ns] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-zvpzyoa2ns] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #E2E8F0;
    background: white;
    color: #475569;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-cancel:hover[b-zvpzyoa2ns] {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.btn-confirm-danger[b-zvpzyoa2ns] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: #EF4444;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-confirm-danger:hover:not(:disabled)[b-zvpzyoa2ns] {
    background: #DC2626;
}

.btn-confirm-danger:disabled[b-zvpzyoa2ns] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-confirm-danger i[b-zvpzyoa2ns] {
    font-size: 18px;
}

.spinner[b-zvpzyoa2ns] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-zvpzyoa2ns 0.8s linear infinite;
}

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

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
    .tab-section[b-zvpzyoa2ns] {
        padding: 1rem;
    }

    .section-header h3[b-zvpzyoa2ns] {
        font-size: 1rem;
    }

    .add-btn span[b-zvpzyoa2ns] {
        display: none;
    }

    .add-btn[b-zvpzyoa2ns] {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .camp-cards[b-zvpzyoa2ns] {
        grid-template-columns: 1fr;
    }

    .active-camp-header[b-zvpzyoa2ns] {
        flex-wrap: wrap;
    }

    .camp-countdown[b-zvpzyoa2ns] {
        margin-left: auto;
    }

    .active-camp-details[b-zvpzyoa2ns] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .camp-actions[b-zvpzyoa2ns] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-view[b-zvpzyoa2ns],
    .btn-deactivate[b-zvpzyoa2ns] {
        width: 100%;
    }

    .confirm-dialog[b-zvpzyoa2ns] {
        padding: 1.25rem;
    }

    .confirm-actions[b-zvpzyoa2ns] {
        flex-direction: column;
    }
}
/* /Components/Pages/OrganizationFeature/Components/FightersReadinessTab.razor.rz.scp.css */
.tab-section[b-abzii2c3mo] {
    padding: 1.25rem;
}

.section-header[b-abzii2c3mo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-header h3[b-abzii2c3mo] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
}

.add-btn[b-abzii2c3mo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.add-btn:hover[b-abzii2c3mo] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-btn i[b-abzii2c3mo] {
    font-size: 18px;
}

/* Empty State */
.empty-state[b-abzii2c3mo] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-abzii2c3mo] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-abzii2c3mo] {
    font-size: 40px;
    color: #94A3B8;
}

.empty-state h4[b-abzii2c3mo] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #1E293B;
}

.empty-state p[b-abzii2c3mo] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.95rem;
}

.primary-btn[b-abzii2c3mo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.primary-btn:hover[b-abzii2c3mo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

/* Fighter Cards */
.fighter-cards[b-abzii2c3mo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fighter-card[b-abzii2c3mo] {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.fighter-card:hover[b-abzii2c3mo] {
    border-color: var(--cl-primary, #3B82F6);
    transform: translateX(4px);
}

.fighter-card-header[b-abzii2c3mo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.rank-badge[b-abzii2c3mo] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748B;
    flex-shrink: 0;
}

.rank-badge.gold[b-abzii2c3mo] {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: white;
}

.rank-badge.silver[b-abzii2c3mo] {
    background: linear-gradient(135deg, #CBD5E1, #94A3B8);
    color: white;
}

.rank-badge.bronze[b-abzii2c3mo] {
    background: linear-gradient(135deg, #D97706, #B45309);
    color: white;
}

.fighter-avatar[b-abzii2c3mo],
.fighter-avatar-img[b-abzii2c3mo] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fighter-avatar[b-abzii2c3mo] {
    background: linear-gradient(135deg, #22C55E, #16A34A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

.fighter-avatar-img[b-abzii2c3mo] {
    object-fit: cover;
    border: 2px solid #E2E8F0;
}

.fighter-details[b-abzii2c3mo] {
    flex: 1;
    min-width: 0;
}

.fighter-name[b-abzii2c3mo] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
}

.fighter-division[b-abzii2c3mo] {
    font-size: 0.8rem;
    color: #64748B;
}

.card-actions[b-abzii2c3mo] {
    flex-shrink: 0;
}

.icon-btn[b-abzii2c3mo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn.danger[b-abzii2c3mo] {
    color: #EF4444;
}

.icon-btn.danger:hover[b-abzii2c3mo] {
    background: #FEE2E2;
}

.icon-btn i[b-abzii2c3mo] {
    font-size: 18px;
}

.readiness-display[b-abzii2c3mo] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.readiness-ring[b-abzii2c3mo] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--progress) * 3.6deg), #E2E8F0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.readiness-ring[b-abzii2c3mo]::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #F8FAFC;
}

.readiness-value[b-abzii2c3mo] {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
}

.readiness-value small[b-abzii2c3mo] {
    font-size: 0.7rem;
    font-weight: 500;
}

.readiness-bar-wrap[b-abzii2c3mo] {
    flex: 1;
    min-width: 0;
}

.readiness-bar-bg[b-abzii2c3mo] {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.readiness-bar-fill[b-abzii2c3mo] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.readiness-label[b-abzii2c3mo] {
    font-size: 0.75rem;
    color: #64748B;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .tab-section[b-abzii2c3mo] {
        padding: 1rem;
    }

    .section-header h3[b-abzii2c3mo] {
        font-size: 1rem;
    }

    .add-btn span[b-abzii2c3mo] {
        display: none;
    }

    .add-btn[b-abzii2c3mo] {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .readiness-ring[b-abzii2c3mo] {
        width: 48px;
        height: 48px;
    }

    .readiness-value[b-abzii2c3mo] {
        font-size: 0.9rem;
    }

    .fighter-card-header[b-abzii2c3mo] {
        flex-wrap: wrap;
    }

    .fighter-details[b-abzii2c3mo] {
        flex: 1 1 calc(100% - 100px);
    }
}
/* /Components/Pages/OrganizationFeature/Components/OrganizationFighters.razor.rz.scp.css */
/* Section Header */
.section-header[b-cyimolzukv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.section-title[b-cyimolzukv] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a202c;
}

.section-subtitle[b-cyimolzukv] {
    margin: 0.125rem 0 0 0;
    font-size: 0.8125rem;
    color: #94A3B8;
}

/* Empty State */
.empty-card[b-cyimolzukv] {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.empty-state[b-cyimolzukv] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: white;
    border: 1px dashed #E2E8F0;
    border-radius: 12px;
}

    .empty-state h5[b-cyimolzukv] {
        margin: 0 0 0.25rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1a202c;
    }

    .empty-state p[b-cyimolzukv] {
        margin: 0 0 1rem 0;
        color: #94A3B8;
        font-size: 0.875rem;
    }

/* Fighter Grid — stacked list */
.fighter-grid[b-cyimolzukv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fighter-card[b-cyimolzukv] {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.fighter-card-content[b-cyimolzukv] {
    padding: 1rem;
    background: white;
    border-radius: 12px;
}

.fighter-info[b-cyimolzukv] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.fighter-avatar[b-cyimolzukv] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

    .fighter-avatar.initials[b-cyimolzukv] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EDF2F7;
        color: #64748B;
        font-size: 0.875rem;
        font-weight: 600;
    }

.fighter-details[b-cyimolzukv] {
    flex: 1;
    min-width: 0;
}

.fighter-name[b-cyimolzukv] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a202c;
    line-height: 1.3;
}

.fighter-email[b-cyimolzukv] {
    font-size: 0.8125rem;
    color: #94A3B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fighter-coach[b-cyimolzukv] {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .fighter-coach.unassigned[b-cyimolzukv] {
        color: #CBD5E0;
    }

.fighter-meta[b-cyimolzukv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #94A3B8;
}

.status-badge[b-cyimolzukv] {
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .status-badge.active[b-cyimolzukv] {
        background: #ECFDF5;
        color: #059669;
    }

    .status-badge.inactive[b-cyimolzukv] {
        background: #FEF2F2;
        color: #DC2626;
    }

/* Fighter Stats */
.fighter-stats[b-cyimolzukv] {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #F1F5F9;
}

.fighter-stat-box[b-cyimolzukv] {
    text-align: center;
}

.fighter-stat-value[b-cyimolzukv] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1;
}

.fighter-stat-label[b-cyimolzukv] {
    font-size: 0.6875rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Actions */
.fighter-actions[b-cyimolzukv] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* Pending Invites */
.pending-section[b-cyimolzukv] {
    margin-top: 1.5rem;
}

.pending-title[b-cyimolzukv] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    margin: 0 0 0.75rem 0;
}

.pending-list[b-cyimolzukv] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pending-item[b-cyimolzukv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #E0E6EB;
}

.pending-email[b-cyimolzukv] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
}

.pending-date[b-cyimolzukv] {
    font-size: 0.8rem;
    color: #6C757D;
    margin-top: 0.25rem;
}

/* Responsive */
@@media (max-width: 768px) {
    .fighter-grid[b-cyimolzukv] {
        grid-template-columns: 1fr;
    }

    .section-header[b-cyimolzukv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}
/* /Components/Pages/OrganizationFeature/Components/OrganizationTeams.razor.rz.scp.css */
.logo-preview-container[b-rlfuxjeo8b] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image[b-rlfuxjeo8b] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.org-teams[b-rlfuxjeo8b] {
    padding: 0;
}

.section-header[b-rlfuxjeo8b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

    .section-header h2[b-rlfuxjeo8b] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1a202c;
    }

.empty-state[b-rlfuxjeo8b] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: white;
    border: 1px dashed #E2E8F0;
    border-radius: 12px;
}

    .empty-state h3[b-rlfuxjeo8b] {
        margin: 0.5rem 0 0.25rem;
        font-size: 1rem;
        font-weight: 600;
        color: #1a202c;
    }

    .empty-state p[b-rlfuxjeo8b] {
        margin: 0 0 1rem;
        color: #94A3B8;
        font-size: 0.875rem;
    }

.teams-grid[b-rlfuxjeo8b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-card[b-rlfuxjeo8b] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: none;
}

    .team-card:hover[b-rlfuxjeo8b] {
        box-shadow: none;
        transform: none;
    }

.team-color-bar[b-rlfuxjeo8b] {
    height: 3px;
}

.team-content[b-rlfuxjeo8b] {
    padding: 1rem;
}

.team-header[b-rlfuxjeo8b] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
}

.team-logo[b-rlfuxjeo8b] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.team-logo-placeholder[b-rlfuxjeo8b] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.team-info[b-rlfuxjeo8b] {
    flex: 1;
    min-width: 0;
}

.team-name[b-rlfuxjeo8b] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a202c;
}

.team-description[b-rlfuxjeo8b] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: #94A3B8;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.team-stats[b-rlfuxjeo8b] {
    display: flex;
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid #F1F5F9;
    border-bottom: none;
    margin: 0.75rem 0 0;
}

.stat-item[b-rlfuxjeo8b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .stat-item i[b-rlfuxjeo8b] {
        color: #94A3B8;
        font-size: 16px;
    }

.stat-value[b-rlfuxjeo8b] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1a202c;
}

.stat-label[b-rlfuxjeo8b] {
    font-size: 0.75rem;
    color: #94A3B8;
}

.team-actions[b-rlfuxjeo8b] {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

    .team-actions .rz-button:first-child[b-rlfuxjeo8b] {
        flex: 1;
    }
/* /Components/Pages/OrganizationFeature/Components/TeamEditorDialog.razor.rz.scp.css */
.team-editor[b-3oiozy76ck] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Header Row - Logo + Actions Side by Side */
.header-row[b-3oiozy76ck] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #F8F9FB 0%, #EEF2F7 100%);
    border-radius: 12px;
}

.logo-preview-container[b-3oiozy76ck] {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image[b-3oiozy76ck] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.logo-placeholder[b-3oiozy76ck] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cl-primary-light, #E8F4FD);
    color: var(--cl-primary, #70AFFB);
}

    .logo-placeholder .rzi[b-3oiozy76ck] {
        font-size: 32px;
    }

.header-info[b-3oiozy76ck] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.logo-actions[b-3oiozy76ck] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Make upload button more compact */
.logo-upload-btn[b-3oiozy76ck]  .rz-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

/* Form Section */
.form-section[b-3oiozy76ck] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0.25rem;
}

.form-group[b-3oiozy76ck] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .form-group label[b-3oiozy76ck] {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--cl-text, #1E293B);
    }

.required[b-3oiozy76ck] {
    color: #EF4444;
}

.char-count[b-3oiozy76ck] {
    text-align: right;
    font-size: 0.7rem;
    color: #94A3B8;
    margin-top: 0.1rem;
}

    .char-count.warning[b-3oiozy76ck] {
        color: #F59E0B;
    }

.color-picker-row[b-3oiozy76ck] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-preview[b-3oiozy76ck] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid #E0E6EB;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.color-hint[b-3oiozy76ck] {
    font-size: 0.75rem;
    color: #94A3B8;
}

/* Dialog Actions */
.dialog-actions[b-3oiozy76ck] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E8EDF2;
}

/* Override Radzen TextArea to be more compact */
.team-editor[b-3oiozy76ck]  .rz-textarea {
    min-height: 60px;
}

@media (max-width: 400px) {
    .header-row[b-3oiozy76ck] {
        flex-direction: column;
        text-align: center;
    }

    .logo-actions[b-3oiozy76ck] {
        justify-content: center;
    }

    .color-picker-row[b-3oiozy76ck] {
        flex-wrap: wrap;
    }

    .dialog-actions[b-3oiozy76ck] {
        flex-direction: column-reverse;
    }

        .dialog-actions .rz-button[b-3oiozy76ck] {
            width: 100%;
        }
}
/* /Components/Pages/OrganizationFeature/Components/TeamRosterTab.razor.rz.scp.css */
.tab-section[b-l8mwxx6sjw] {
    padding: 1.25rem;
}

.section-header[b-l8mwxx6sjw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-header h3[b-l8mwxx6sjw] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
}

.add-btn[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.add-btn:hover[b-l8mwxx6sjw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-btn i[b-l8mwxx6sjw] {
    font-size: 18px;
}

/* ===== ROSTER SECTIONS ===== */
.roster-section[b-l8mwxx6sjw] {
    margin-bottom: 1.5rem;
}

.roster-section:last-child[b-l8mwxx6sjw] {
    margin-bottom: 0;
}

.roster-section-header[b-l8mwxx6sjw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E2E8F0;
}

.section-title[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
}

.section-title i[b-l8mwxx6sjw] {
    font-size: 18px;
    color: #64748B;
}

.in-camp-section .section-title i[b-l8mwxx6sjw] {
    color: #22C55E;
}

.section-count[b-l8mwxx6sjw] {
    background: #E2E8F0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #64748B;
}

.in-camp-section .section-count[b-l8mwxx6sjw] {
    background: #DCFCE7;
    color: #16A34A;
}

.section-subtitle[b-l8mwxx6sjw] {
    font-size: 0.8rem;
    color: #94A3B8;
}

/* ===== IN CAMP FIGHTER LIST ===== */
.fighter-list[b-l8mwxx6sjw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fighter-row[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.fighter-row:hover[b-l8mwxx6sjw] {
    border-color: var(--cl-primary, #3B82F6);
}

.fighter-row.in-camp[b-l8mwxx6sjw] {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 1px solid #BBF7D0;
}

.fighter-row.in-camp:hover[b-l8mwxx6sjw] {
    border-color: #22C55E;
}

.fighter-info[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.camp-badge[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #BBF7D0;
    cursor: pointer;
    transition: all 0.2s;
}

.camp-badge:hover[b-l8mwxx6sjw] {
    background: #F0FDF4;
    border-color: #22C55E;
}

.camp-badge > i:first-child[b-l8mwxx6sjw] {
    font-size: 16px;
    color: #22C55E;
}

.camp-info[b-l8mwxx6sjw] {
    display: flex;
    flex-direction: column;
}

.camp-name-badge[b-l8mwxx6sjw] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #166534;
}

.camp-days[b-l8mwxx6sjw] {
    font-size: 0.7rem;
    color: #16A34A;
}

.camp-badge .arrow[b-l8mwxx6sjw] {
    font-size: 16px;
    color: #94A3B8;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-l8mwxx6sjw] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-l8mwxx6sjw] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-l8mwxx6sjw] {
    font-size: 40px;
    color: #94A3B8;
}

.empty-state h4[b-l8mwxx6sjw] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #1E293B;
}

.empty-state p[b-l8mwxx6sjw] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.95rem;
}

.primary-btn[b-l8mwxx6sjw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: var(--cl-primary, #3B82F6);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.primary-btn:hover[b-l8mwxx6sjw] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

/* ===== AVAILABLE FIGHTER CARDS ===== */
.fighter-cards[b-l8mwxx6sjw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fighter-card[b-l8mwxx6sjw] {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.fighter-card:hover[b-l8mwxx6sjw] {
    border-color: var(--cl-primary, #3B82F6);
    transform: translateX(4px);
}

.fighter-card-header[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.rank-badge[b-l8mwxx6sjw] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748B;
    flex-shrink: 0;
}

.rank-badge.gold[b-l8mwxx6sjw] {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: white;
}

.rank-badge.silver[b-l8mwxx6sjw] {
    background: linear-gradient(135deg, #CBD5E1, #94A3B8);
    color: white;
}

.rank-badge.bronze[b-l8mwxx6sjw] {
    background: linear-gradient(135deg, #D97706, #B45309);
    color: white;
}

.fighter-avatar[b-l8mwxx6sjw],
.fighter-avatar-img[b-l8mwxx6sjw] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fighter-avatar[b-l8mwxx6sjw] {
    background: linear-gradient(135deg, #22C55E, #16A34A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

.fighter-avatar-img[b-l8mwxx6sjw] {
    object-fit: cover;
    border: 2px solid #E2E8F0;
}

.fighter-details[b-l8mwxx6sjw] {
    flex: 1;
    min-width: 0;
}

.fighter-name[b-l8mwxx6sjw] {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.95rem;
}

.fighter-division[b-l8mwxx6sjw] {
    font-size: 0.8rem;
    color: #64748B;
}

.card-actions[b-l8mwxx6sjw] {
    flex-shrink: 0;
}

.icon-btn[b-l8mwxx6sjw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn.danger[b-l8mwxx6sjw] {
    color: #EF4444;
}

.icon-btn.danger:hover[b-l8mwxx6sjw] {
    background: #FEE2E2;
}

.icon-btn i[b-l8mwxx6sjw] {
    font-size: 18px;
}

/* ===== READINESS DISPLAY ===== */
.readiness-display[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.readiness-ring[b-l8mwxx6sjw] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--progress) * 3.6deg), #E2E8F0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.readiness-ring[b-l8mwxx6sjw]::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: white;
}

.readiness-value[b-l8mwxx6sjw] {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
}

.readiness-value small[b-l8mwxx6sjw] {
    font-size: 0.7rem;
    font-weight: 500;
}

.readiness-bar-wrap[b-l8mwxx6sjw] {
    flex: 1;
    min-width: 0;
}

.readiness-bar-bg[b-l8mwxx6sjw] {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.readiness-bar-fill[b-l8mwxx6sjw] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.readiness-label[b-l8mwxx6sjw] {
    font-size: 0.75rem;
    color: #64748B;
}

/* ===== ALL IN CAMP NOTICE ===== */
.all-in-camp-notice[b-l8mwxx6sjw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-radius: 12px;
    color: #166534;
    font-weight: 600;
    font-size: 0.95rem;
}

.all-in-camp-notice i[b-l8mwxx6sjw] {
    font-size: 20px;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
    .tab-section[b-l8mwxx6sjw] {
        padding: 1rem;
    }

    .section-header h3[b-l8mwxx6sjw] {
        font-size: 1rem;
    }

    .add-btn span[b-l8mwxx6sjw] {
        display: none;
    }

    .add-btn[b-l8mwxx6sjw] {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .fighter-row[b-l8mwxx6sjw] {
        flex-wrap: wrap;
    }

    .fighter-row .card-actions[b-l8mwxx6sjw] {
        position: absolute;
        right: 0.75rem;
        top: 0.75rem;
    }

    .fighter-row[b-l8mwxx6sjw] {
        position: relative;
        padding-right: 2.5rem;
    }

    .camp-badge[b-l8mwxx6sjw] {
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }

    .readiness-ring[b-l8mwxx6sjw] {
        width: 48px;
        height: 48px;
    }

    .readiness-value[b-l8mwxx6sjw] {
        font-size: 0.9rem;
    }

    /* Fighter card - keep header items inline */
    .fighter-card-header[b-l8mwxx6sjw] {
        flex-wrap: nowrap;
    }

    .fighter-card-header .card-actions[b-l8mwxx6sjw] {
        flex-shrink: 0;
        margin-left: auto;
    }

    .fighter-card-header .fighter-details[b-l8mwxx6sjw] {
        flex: 1;
        min-width: 0;
    }

    .fighter-card-header .fighter-name[b-l8mwxx6sjw] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Smaller avatars on mobile */
    .fighter-card-header .fighter-avatar[b-l8mwxx6sjw],
    .fighter-card-header .fighter-avatar-img[b-l8mwxx6sjw] {
        width: 40px;
        height: 40px;
    }

    .fighter-card-header .rank-badge[b-l8mwxx6sjw] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .fighter-card[b-l8mwxx6sjw] {
        padding: 0.875rem;
    }

    .readiness-display[b-l8mwxx6sjw] {
        gap: 0.75rem;
    }
}
/* /Components/Pages/OrganizationFeature/Layout/OrganizationLayout.razor.rz.scp.css */
/* ===== ORG SHELL ===== */
.org-wrap[b-uglbn8z177] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: -1.5rem -1rem 0;
}

/* ===== TOP BAR — edge-to-edge, flat, compact ===== */
.org-topbar[b-uglbn8z177] {
    background: #1a202c;
    padding: 2rem 1.25rem;
}

.org-topbar-inner[b-uglbn8z177] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.org-id-row[b-uglbn8z177] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.org-logo[b-uglbn8z177] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.15);
}

.org-logo-fb[b-uglbn8z177] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #4A5568;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    font-weight: 700;
    flex-shrink: 0;
}

.org-id-text[b-uglbn8z177] {
    min-width: 0;
}

.org-id-text h1[b-uglbn8z177] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-sub[b-uglbn8z177] {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.org-desc[b-uglbn8z177] {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.org-settings-ico[b-uglbn8z177] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.org-settings-ico:hover[b-uglbn8z177] {
    color: white;
    background: rgba(255,255,255,0.1);
}

.org-settings-ico .rzi[b-uglbn8z177] {
    font-size: 22px;
}

/* ===== DESKTOP TABS — hidden on mobile ===== */
.org-tabs-desktop[b-uglbn8z177] {
    display: none;
    background: white;
    border-bottom: 1px solid #E2E8F0;
    padding: 0 1.25rem;
}

.org-tab[b-uglbn8z177] {
    position: relative;
    display: inline-flex;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.org-tab:hover[b-uglbn8z177] {
    color: #1E293B;
}

.org-tab.active[b-uglbn8z177] {
    color: #1E293B;
    font-weight: 600;
}

.org-tab.active[b-uglbn8z177]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: #3B82F6;
    border-radius: 2px 2px 0 0;
}

/* ===== BACK BAR (sub-pages) ===== */
.org-backbar[b-uglbn8z177] {
    background: white;
    border-bottom: 1px solid #E2E8F0;
    padding: 0.75rem 1.25rem;
}

.org-back-link[b-uglbn8z177] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3B82F6;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.org-back-link .rzi[b-uglbn8z177] {
    font-size: 20px;
}

/* ===== BODY ===== */
.org-body[b-uglbn8z177] {
    flex: 1;
    padding: 1rem 1.25rem 5rem;
    background: #f7f8fa;
}

/* ===== LOADING ===== */
.org-loading[b-uglbn8z177] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.org-spinner[b-uglbn8z177] {
    width: 28px;
    height: 28px;
    border: 3px solid #E2E8F0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: org-spin-b-uglbn8z177 0.6s linear infinite;
}

@keyframes org-spin-b-uglbn8z177 {
    to { transform: rotate(360deg); }
}

/* ===== EMPTY / ERROR ===== */
.org-empty[b-uglbn8z177] {
    text-align: center;
    padding: 4rem 1.5rem;
}

.org-empty .rzi[b-uglbn8z177] {
    font-size: 48px;
    color: #CBD5E0;
    margin-bottom: 1rem;
}

.org-empty h2[b-uglbn8z177] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
}

.org-empty p[b-uglbn8z177] {
    margin: 0 0 1.5rem;
    color: #718096;
}

.org-empty-btn[b-uglbn8z177] {
    display: inline-flex;
    padding: 0.625rem 1.25rem;
    background: #3B82F6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== DESKTOP (≥ 768px) ===== */
@media (min-width: 768px) {
    .org-topbar[b-uglbn8z177] {
        padding: 1.5rem 2rem;
    }

    .org-logo[b-uglbn8z177],
    .org-logo-fb[b-uglbn8z177] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    .org-logo-fb[b-uglbn8z177] {
        font-size: 1.5rem;
    }

    .org-id-text h1[b-uglbn8z177] {
        font-size: 1.375rem;
    }

    .org-tabs-desktop[b-uglbn8z177] {
        display: flex;
        padding: 0 2rem;
    }

    .org-backbar[b-uglbn8z177] {
        padding: 0.75rem 2rem;
    }

    .org-body[b-uglbn8z177] {
        padding: 1.5rem 2rem 2rem;
    }
}
/* /Components/Pages/OrganizationFeature/Pages/OrganizationOverviewPage.razor.rz.scp.css */
/* ===== MANAGEMENT HUB ===== */
.mgmt-hub[b-rh8bnu0qfz] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ===== MANAGEMENT CARD ===== */
.mgmt-card[b-rh8bnu0qfz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mgmt-card:active[b-rh8bnu0qfz] {
    background: #F1F5F9;
}

.mgmt-card-left[b-rh8bnu0qfz] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.mgmt-ico[b-rh8bnu0qfz] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mgmt-ico .rzi[b-rh8bnu0qfz] {
    font-size: 22px;
}

.mgmt-ico-blue[b-rh8bnu0qfz]  { background: #EBF5FF; }
.mgmt-ico-blue .rzi[b-rh8bnu0qfz] { color: #3B82F6; }

.mgmt-ico-green[b-rh8bnu0qfz] { background: #ECFDF5; }
.mgmt-ico-green .rzi[b-rh8bnu0qfz] { color: #10B981; }

.mgmt-ico-purple[b-rh8bnu0qfz] { background: #F3F0FF; }
.mgmt-ico-purple .rzi[b-rh8bnu0qfz] { color: #8B5CF6; }

.mgmt-ico-teal[b-rh8bnu0qfz]  { background: #F0FDFA; }
.mgmt-ico-teal .rzi[b-rh8bnu0qfz] { color: #14B8A6; }

.mgmt-ico-amber[b-rh8bnu0qfz] { background: #FFFBEB; }
.mgmt-ico-amber .rzi[b-rh8bnu0qfz] { color: #F59E0B; }

.mgmt-ico-gray[b-rh8bnu0qfz]  { background: #F1F5F9; }
.mgmt-ico-gray .rzi[b-rh8bnu0qfz] { color: #64748B; }

.mgmt-card-info[b-rh8bnu0qfz] {
    min-width: 0;
}

.mgmt-card-info h3[b-rh8bnu0qfz] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a202c;
    line-height: 1.3;
}

.mgmt-card-info p[b-rh8bnu0qfz] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: #94A3B8;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgmt-card-right[b-rh8bnu0qfz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mgmt-badge[b-rh8bnu0qfz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: #EDF2F7;
    color: #4A5568;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
}

.mgmt-arrow[b-rh8bnu0qfz] {
    color: #CBD5E0;
    font-size: 20px;
}

/* ===== DESKTOP (? 768px) ===== */
@media (min-width: 768px) {
    .mgmt-hub[b-rh8bnu0qfz] {
        gap: 0.5rem;
    }

    .mgmt-card[b-rh8bnu0qfz] {
        padding: 1.125rem 1.25rem;
        border-radius: 10px;
        cursor: pointer;
    }

    .mgmt-card:hover[b-rh8bnu0qfz] {
        background: #F8FAFC;
    }

    .mgmt-card:hover .mgmt-arrow[b-rh8bnu0qfz] {
        color: #3B82F6;
    }

    .mgmt-ico[b-rh8bnu0qfz] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .mgmt-ico .rzi[b-rh8bnu0qfz] {
        font-size: 24px;
    }

    .mgmt-card-info h3[b-rh8bnu0qfz] {
        font-size: 1rem;
    }

    .mgmt-card-info p[b-rh8bnu0qfz] {
        font-size: 0.875rem;
        white-space: normal;
    }
}
/* /Components/Pages/OrganizationFeature/Pages/OrganizationPublicProfile.razor.rz.scp.css */
/* ============================================
   ORGANIZATION PUBLIC PROFILE
   Mobile-first, dark header, clean SaaS
   ============================================ */

.org-profile-page[b-onji2qddgl] {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ?? BACK BAR ?? */
.back-bar[b-onji2qddgl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: color 0.15s;
}

.back-bar:hover[b-onji2qddgl] {
    color: #1E293B;
}

.back-bar[b-onji2qddgl]  .rzi {
    font-size: 18px;
}

/* ?? NOT FOUND ?? */
.not-found[b-onji2qddgl] {
    text-align: center;
    padding: 3rem 1.25rem;
}

.not-found-icon[b-onji2qddgl] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.not-found-icon[b-onji2qddgl]  .rzi {
    font-size: 28px;
    color: #94A3B8;
}

.not-found h3[b-onji2qddgl] {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E293B;
}

.not-found p[b-onji2qddgl] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748B;
}

/* ?? ORG HEADER ?? */
.org-header[b-onji2qddgl] {
    background: linear-gradient(135deg, #1a202c 0%, #193153 50%, #10335E 100%);
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.org-logo-wrap[b-onji2qddgl] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.org-logo-img[b-onji2qddgl] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.org-logo-fallback[b-onji2qddgl] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.org-logo-fallback[b-onji2qddgl]  .rzi {
    font-size: 28px;
    color: white;
}

.org-header-info[b-onji2qddgl] {
    flex: 1;
    min-width: 0;
}

.org-header-info h1[b-onji2qddgl] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.org-type-badge[b-onji2qddgl] {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.15rem 0.55rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
}

/* ?? DETAILS ?? */
.org-details[b-onji2qddgl] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.org-description[b-onji2qddgl] {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
}

.detail-list[b-onji2qddgl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-onji2qddgl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: #F8F9FB;
    border-radius: 10px;
    border: 1px solid #E0E6EB;
}

.detail-row[b-onji2qddgl]  .rzi {
    font-size: 18px;
    color: #70AFFB;
    flex-shrink: 0;
}

.detail-row span[b-onji2qddgl] {
    font-size: 0.88rem;
    color: #1E293B;
    font-weight: 500;
}

/* ?? COACHES ?? */
.coaches-section[b-onji2qddgl] {
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
}

.section-head[b-onji2qddgl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.section-head[b-onji2qddgl]  .rzi {
    font-size: 20px;
    color: #94A3B8;
}

.section-head h3[b-onji2qddgl] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coaches-list[b-onji2qddgl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coach-card[b-onji2qddgl] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: white;
    border-radius: 14px;
    border: 1px solid #E0E6EB;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.coach-info[b-onji2qddgl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.coach-name[b-onji2qddgl] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
}

.coach-bio[b-onji2qddgl] {
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coach-specialties[b-onji2qddgl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.specialty-tag[b-onji2qddgl] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #2563EB;
}

/* ?? TEAMS ?? */
.teams-section[b-onji2qddgl] {
    padding: 0 1.25rem;
}

.teams-list[b-onji2qddgl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.team-row[b-onji2qddgl] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #E0E6EB;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1E293B;
}

.team-icon[b-onji2qddgl] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.team-icon[b-onji2qddgl]  .rzi {
    font-size: 16px;
    color: #94A3B8;
}
/* /Components/Pages/OrganizationFeature/Pages/TeamDetail.razor.rz.scp.css */
/* ===== TEAM DETAIL SHELL ===== */
.td-wrap[b-12uiih1rgy] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: -1.5rem -1rem 0;
}

/* ===== DARK TOP BAR ===== */
.td-topbar[b-12uiih1rgy] {
    background: #1a202c;
    padding: 2rem 1.25rem;
}

.td-topbar-inner[b-12uiih1rgy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.td-id-row[b-12uiih1rgy] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.td-logo-wrap[b-12uiih1rgy] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.td-logo-img[b-12uiih1rgy],
.td-logo-fallback[b-12uiih1rgy] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.15);
}

.td-logo-fallback[b-12uiih1rgy] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4A5568;
    color: white;
}

.td-logo-fallback .rzi[b-12uiih1rgy] {
    font-size: 28px;
}

.td-id-text[b-12uiih1rgy] {
    min-width: 0;
}

.td-id-text h1[b-12uiih1rgy] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-sub-lines[b-12uiih1rgy] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.25rem;
}

.td-sub-line[b-12uiih1rgy] {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ===== BACK BAR ===== */
.td-backbar[b-12uiih1rgy] {
    background: white;
    border-bottom: 1px solid #E2E8F0;
    padding: 0.75rem 1.25rem;
}

.td-back-link[b-12uiih1rgy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3B82F6;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.td-back-link .rzi[b-12uiih1rgy] {
    font-size: 20px;
}

/* ===== BODY ===== */
.td-body[b-12uiih1rgy] {
    flex: 1;
    padding: 1rem 1.25rem 5rem;
    background: #f7f8fa;
}

/* ===== SECTIONS ===== */
.td-section[b-12uiih1rgy] {
    margin-bottom: 1.25rem;
}

.td-section-label[b-12uiih1rgy] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

/* ===== STATS ROW ===== */
.td-stats-row[b-12uiih1rgy] {
    display: flex;
    gap: 0.5rem;
}

.td-stat[b-12uiih1rgy] {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
}

.td-stat-value[b-12uiih1rgy] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

.td-stat-label[b-12uiih1rgy] {
    font-size: 0.625rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* ===== HUB CARDS ===== */
.td-hub-cards[b-12uiih1rgy] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.td-hub-card[b-12uiih1rgy] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.td-hub-card:active[b-12uiih1rgy] {
    background: #F8FAFC;
}

.td-hub-ico[b-12uiih1rgy] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.td-hub-ico .rzi[b-12uiih1rgy] {
    font-size: 22px;
}

.td-ico-red[b-12uiih1rgy]   { background: #FEF2F2; }
.td-ico-red .rzi[b-12uiih1rgy] { color: #EF4444; }
.td-ico-blue[b-12uiih1rgy]  { background: #EBF5FF; }
.td-ico-blue .rzi[b-12uiih1rgy] { color: #3B82F6; }
.td-ico-amber[b-12uiih1rgy] { background: #FFFBEB; }
.td-ico-amber .rzi[b-12uiih1rgy] { color: #F59E0B; }

.td-hub-text[b-12uiih1rgy] {
    flex: 1;
    min-width: 0;
}

.td-hub-title[b-12uiih1rgy] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a202c;
}

.td-hub-desc[b-12uiih1rgy] {
    font-size: 0.8125rem;
    color: #94A3B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-hub-count[b-12uiih1rgy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #EBF5FF;
    color: #3B82F6;
    font-size: 0.75rem;
    font-weight: 600;
}

.td-hub-chev[b-12uiih1rgy] {
    font-size: 20px;
    color: #CBD5E0;
    flex-shrink: 0;
}

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
    .td-topbar[b-12uiih1rgy] {
        padding: 1.5rem 2rem;
    }

    .td-logo-img[b-12uiih1rgy],
    .td-logo-fallback[b-12uiih1rgy],
    .td-logo-wrap[b-12uiih1rgy] {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .td-id-text h1[b-12uiih1rgy] {
        font-size: 1.375rem;
    }

    .td-backbar[b-12uiih1rgy] {
        padding: 0.75rem 2rem;
    }

    .td-body[b-12uiih1rgy] {
        padding: 1.5rem 2rem 2rem;
    }

    .td-hub-cards[b-12uiih1rgy] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}
/* /Components/Pages/SubscriptionFeature/Pages/SubscriptionManagement.razor.rz.scp.css */
/* Subscription Management Page */

.subscription-page[b-ew16ic1jun] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-ew16ic1jun] {
    margin-bottom: 2rem;
}

.page-header h1[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-header h1 .rzi[b-ew16ic1jun] {
    color: #70AFFB;
}

.page-header .subtitle[b-ew16ic1jun] {
    color: #64748b;
    margin: 0.5rem 0 0 0;
}

/* No Subscription State */
.no-subscription[b-ew16ic1jun] {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8fafc;
    border-radius: 1rem;
    border: 1px dashed #cbd5e1;
}

.no-subscription .rzi[b-ew16ic1jun] {
    font-size: 3rem;
    color: #94a3b8;
}

.no-subscription h3[b-ew16ic1jun] {
    margin: 1rem 0 0.5rem;
    color: #1e293b;
}

.no-subscription p[b-ew16ic1jun] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Grid Layout */
.subscription-grid[b-ew16ic1jun] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .subscription-grid[b-ew16ic1jun] {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.plan-card[b-ew16ic1jun],
.billing-card[b-ew16ic1jun],
.integration-card[b-ew16ic1jun],
.actions-card[b-ew16ic1jun] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
}

.card-header[b-ew16ic1jun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.card-header h2[b-ew16ic1jun] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* Status Badges */
.status-badge[b-ew16ic1jun] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.trial[b-ew16ic1jun] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-badge.active[b-ew16ic1jun] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.cancelled[b-ew16ic1jun] {
    background: #fee2e2;
    color: #991b1b;
}

/* Plan Card */
.plan-details[b-ew16ic1jun] {
    margin-bottom: 1.25rem;
}

.plan-name[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.plan-name .rzi[b-ew16ic1jun] {
    color: #f59e0b;
    font-size: 1.25rem;
}

.plan-price[b-ew16ic1jun] {
    margin-bottom: 0.75rem;
}

.plan-price .price[b-ew16ic1jun] {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
}

.plan-price .price.free[b-ew16ic1jun] {
    color: #22c55e;
}

.plan-price .period[b-ew16ic1jun] {
    font-size: 1rem;
    color: #64748b;
}

.promo-applied[b-ew16ic1jun] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #f0fdf4;
    color: #166534;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.promo-applied .rzi[b-ew16ic1jun] {
    color: #22c55e;
    font-size: 1rem;
}

.plan-features[b-ew16ic1jun] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-features .feature[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #475569;
}

.plan-features .feature .rzi[b-ew16ic1jun] {
    color: #70AFFB;
    font-size: 1rem;
}

/* Billing Card */
.billing-info[b-ew16ic1jun] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.info-row[b-ew16ic1jun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-row .label[b-ew16ic1jun] {
    font-size: 0.875rem;
    color: #64748b;
}

.info-row .value[b-ew16ic1jun] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.info-row.highlight .value[b-ew16ic1jun] {
    color: #f59e0b;
}

.info-row.cancelled .value[b-ew16ic1jun] {
    color: #dc2626;
}

.trial-countdown[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef3c7;
    color: #92400e;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.trial-countdown .rzi[b-ew16ic1jun] {
    color: #f59e0b;
}

.stripe-actions[b-ew16ic1jun] {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
}

/* Integration Card */
.stripe-connected[b-ew16ic1jun],
.free-plan[b-ew16ic1jun],
.stripe-pending[b-ew16ic1jun] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: 0.75rem;
}

.stripe-connected[b-ew16ic1jun] {
    background: #f0fdf4;
}

.stripe-connected .rzi[b-ew16ic1jun] {
    color: #22c55e;
    font-size: 1.5rem;
}

.stripe-connected strong[b-ew16ic1jun] {
    color: #166534;
}

.stripe-connected p[b-ew16ic1jun] {
    color: #15803d;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.free-plan[b-ew16ic1jun] {
    background: #f0f9ff;
}

.free-plan .rzi[b-ew16ic1jun] {
    color: #0ea5e9;
    font-size: 1.5rem;
}

.free-plan strong[b-ew16ic1jun] {
    color: #0369a1;
}

.free-plan p[b-ew16ic1jun] {
    color: #0284c7;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.stripe-pending[b-ew16ic1jun] {
    background: #fefce8;
    flex-wrap: wrap;
}

.stripe-pending .rzi[b-ew16ic1jun] {
    color: #f59e0b;
    font-size: 1.5rem;
}

.stripe-pending strong[b-ew16ic1jun] {
    color: #92400e;
}

.stripe-pending p[b-ew16ic1jun] {
    color: #a16207;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.stripe-pending > div[b-ew16ic1jun] {
    flex: 1;
    min-width: 150px;
}

/* Actions Card */
.action-buttons[b-ew16ic1jun] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Promo Code Section */
.promo-code-section[b-ew16ic1jun] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.promo-code-section h4[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.75rem 0;
}

.promo-code-section h4 .rzi[b-ew16ic1jun] {
    color: #f59e0b;
}

.promo-input-group[b-ew16ic1jun] {
    display: flex;
    gap: 0.5rem;
}

.promo-input-group input[b-ew16ic1jun] {
    flex: 1;
    text-transform: uppercase;
}

.promo-error[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #dc2626;
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

.promo-error .rzi[b-ew16ic1jun] {
    font-size: 1rem;
}

.promo-success[b-ew16ic1jun] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #16a34a;
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

.promo-success .rzi[b-ew16ic1jun] {
    font-size: 1rem;
}

/* /Components/Shared/ActivityFeed.razor.rz.scp.css */
.activity-feed-container[b-hmlr0n8gc7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-loading[b-hmlr0n8gc7],
.activity-empty[b-hmlr0n8gc7] {
    text-align: center;
    padding: 2rem;
    color: #6B7280;
}

    .activity-empty i.rzi[b-hmlr0n8gc7] {
        font-size: 48px;
        color: #CBD5E1;
        margin-bottom: 0.5rem;
    }

.activity-filters[b-hmlr0n8gc7] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.activity-timeline[b-hmlr0n8gc7] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.activity-group[b-hmlr0n8gc7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.group-header[b-hmlr0n8gc7] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    padding: 0 0.5rem;
}

.activity-item[b-hmlr0n8gc7] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #E8EDF2;
    transition: all 0.2s;
}

    .activity-item:hover[b-hmlr0n8gc7] {
        border-color: #70AFFB;
        box-shadow: 0 2px 8px rgba(112, 175, 251, 0.1);
    }

.activity-icon[b-hmlr0n8gc7] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .activity-icon i.rzi[b-hmlr0n8gc7] {
        font-size: 20px;
    }

.activity-content[b-hmlr0n8gc7] {
    flex: 1;
    min-width: 0;
}

.activity-fighter-name[b-hmlr0n8gc7] {
    font-weight: 700;
    font-size: 0.8rem;
    color: #70AFFB;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.activity-title[b-hmlr0n8gc7] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1E293B;
    margin-bottom: 0.15rem;
}

.activity-description[b-hmlr0n8gc7] {
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.activity-time[b-hmlr0n8gc7] {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.activity-load-more[b-hmlr0n8gc7] {
    text-align: center;
    padding: 0.5rem 0;
}

/* Type-specific styling */
.activity-item.achievement .activity-icon[b-hmlr0n8gc7] {
    background: rgba(251, 191, 36, 0.15);
    color: #F59E0B;
}

.activity-item.checkin .activity-icon[b-hmlr0n8gc7] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.activity-item.training .activity-icon[b-hmlr0n8gc7] {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}
/* /Components/Shared/Components/OnboardingBanner.razor.rz.scp.css */
/* OnboardingBanner scoped styles */

.banner-content[b-j3ijyrmyaq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.banner-left[b-j3ijyrmyaq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.banner-text h5[b-j3ijyrmyaq] {
    margin: 0 0 0.25rem 0;
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}

.banner-text small[b-j3ijyrmyaq] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Animation */
[b-j3ijyrmyaq] .onboard-banner {
    animation: slideDown-b-j3ijyrmyaq 0.4s ease-out;
}

@keyframes slideDown-b-j3ijyrmyaq {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .banner-content[b-j3ijyrmyaq] {
        flex-direction: column;
        text-align: center;
    }

    .banner-left[b-j3ijyrmyaq] {
        flex-direction: column;
    }

    .banner-text[b-j3ijyrmyaq] {
        text-align: center;
    }

    [b-j3ijyrmyaq] .rz-button {
        width: 100%;
    }
}
/* /Components/Shared/Components/UserProfileImage.razor.rz.scp.css */
/* ============================================
   UserProfileImage Component - Scoped Styles
   ============================================ */

/* Base image styling */
img[b-llaamnx387] {
    display: block;
    object-fit: cover;
}

/* Base initials div styling */
div[b-llaamnx387] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    user-select: none;
}

/* Ensure proper flex shrinking */
img[b-llaamnx387],
div[b-llaamnx387] {
    flex-shrink: 0;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* EmptyState � scoped styles (UI_STANDARDS.md) */

.cl-empty[b-jn8ecktxwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--cl-card, #FFFFFF);
    border: 1px solid var(--cl-border, #E0E6EB);
    border-radius: var(--cl-radius-lg, 18px);
    box-shadow: var(--cl-shadow-soft, 0 2px 12px rgba(15,23,42,0.06));
}

.cl-empty-icon[b-jn8ecktxwd] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(112, 175, 251, 0.10);
    border-radius: 16px;
    margin-bottom: 1rem;
}

.cl-empty-icon i.rzi[b-jn8ecktxwd] {
    font-size: 28px;
    color: var(--cl-primary, #70AFFB);
}

.cl-empty-title[b-jn8ecktxwd] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cl-text, #1E293B);
    margin: 0 0 0.25rem;
}

.cl-empty-message[b-jn8ecktxwd] {
    font-size: 0.875rem;
    color: var(--cl-text-secondary, #6C757D);
    margin: 0 0 1.25rem;
    max-width: 320px;
    line-height: 1.5;
}

/* When there's no message but there IS an action, add spacing */
.cl-empty-title + .cl-empty-action[b-jn8ecktxwd] {
    margin-top: 1rem;
}

.cl-empty-action[b-jn8ecktxwd] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Shared/ErrorState.razor.rz.scp.css */
/* ErrorState � scoped styles (UI_STANDARDS.md) */

.cl-error[b-oubly5dxfy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--cl-card, #FFFFFF);
    border: 1px solid var(--cl-border, #E0E6EB);
    border-radius: var(--cl-radius-lg, 18px);
    box-shadow: var(--cl-shadow-soft, 0 2px 12px rgba(15,23,42,0.06));
}

.cl-error-icon[b-oubly5dxfy] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.10);
    border-radius: 16px;
    margin-bottom: 1rem;
}

.cl-error-icon i.rzi[b-oubly5dxfy] {
    font-size: 28px;
    color: #EF4444;
}

.cl-error-title[b-oubly5dxfy] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cl-text, #1E293B);
    margin: 0 0 0.25rem;
}

.cl-error-message[b-oubly5dxfy] {
    font-size: 0.875rem;
    color: var(--cl-text-secondary, #6C757D);
    margin: 0 0 1.25rem;
    max-width: 320px;
    line-height: 1.5;
}

.cl-error-title + .cl-error-action[b-oubly5dxfy] {
    margin-top: 1rem;
}

.cl-error-action[b-oubly5dxfy] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Shared/GamificationCelebration.razor.rz.scp.css */
/* ============================================
   GAMIFICATION CELEBRATION ANIMATIONS
   Mobile-game-style loot box / reward animations
   ============================================ */

/* ===== OVERLAY ===== */
.celebration-overlay[b-0ys2ha630y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.98) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.celebration-overlay.entering[b-0ys2ha630y] {
    opacity: 0;
}

.celebration-overlay.visible[b-0ys2ha630y] {
    opacity: 1;
}

.celebration-overlay.exiting[b-0ys2ha630y] {
    opacity: 0;
}

.tap-dismiss[b-0ys2ha630y] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    animation: pulse-fade-b-0ys2ha630y 2s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes pulse-fade-b-0ys2ha630y {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* ===== CELEBRATION ACTIONS (Share + Dismiss) ===== */
.celebration-actions[b-0ys2ha630y] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 10;
}

.celebration-share-btn[b-0ys2ha630y] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    backdrop-filter: blur(4px);
}

.celebration-share-btn:hover[b-0ys2ha630y] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.celebration-share-btn:active[b-0ys2ha630y] {
    transform: scale(0.97);
}

.celebration-shared-label[b-0ys2ha630y] {
    color: #4ade80;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.celebration-shared-label[b-0ys2ha630y]  .rzi {
    font-size: 1.1rem;
}

.tap-dismiss-inline[b-0ys2ha630y] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    animation: pulse-fade-b-0ys2ha630y 2s ease-in-out infinite;
    white-space: nowrap;
}

/* ============================================
   XP GAINED CELEBRATION
   ============================================ */


.xp-celebration[b-0ys2ha630y] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Particle burst */
.particle-container[b-0ys2ha630y] {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
}

.particle[b-0ys2ha630y] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: particle-burst-b-0ys2ha630y 1s ease-out forwards;
}

@keyframes particle-burst-b-0ys2ha630y {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Generate varied particle positions and colors */
.particle-0[b-0ys2ha630y] { --angle: 0deg; --dist: 150px; background: #FFD700; animation-delay: 0s; }
.particle-1[b-0ys2ha630y] { --angle: 18deg; --dist: 130px; background: #43e97b; animation-delay: 0.02s; }
.particle-2[b-0ys2ha630y] { --angle: 36deg; --dist: 160px; background: #FFD700; animation-delay: 0.04s; }
.particle-3[b-0ys2ha630y] { --angle: 54deg; --dist: 140px; background: #70AFFB; animation-delay: 0.06s; }
.particle-4[b-0ys2ha630y] { --angle: 72deg; --dist: 155px; background: #FFD700; animation-delay: 0.08s; }
.particle-5[b-0ys2ha630y] { --angle: 90deg; --dist: 145px; background: #f5576c; animation-delay: 0.1s; }
.particle-6[b-0ys2ha630y] { --angle: 108deg; --dist: 135px; background: #FFD700; animation-delay: 0.12s; }
.particle-7[b-0ys2ha630y] { --angle: 126deg; --dist: 165px; background: #43e97b; animation-delay: 0.14s; }
.particle-8[b-0ys2ha630y] { --angle: 144deg; --dist: 150px; background: #FFD700; animation-delay: 0.16s; }
.particle-9[b-0ys2ha630y] { --angle: 162deg; --dist: 140px; background: #70AFFB; animation-delay: 0.18s; }
.particle-10[b-0ys2ha630y] { --angle: 180deg; --dist: 155px; background: #FFD700; animation-delay: 0.2s; }
.particle-11[b-0ys2ha630y] { --angle: 198deg; --dist: 145px; background: #f5576c; animation-delay: 0.22s; }
.particle-12[b-0ys2ha630y] { --angle: 216deg; --dist: 160px; background: #FFD700; animation-delay: 0.24s; }
.particle-13[b-0ys2ha630y] { --angle: 234deg; --dist: 135px; background: #43e97b; animation-delay: 0.26s; }
.particle-14[b-0ys2ha630y] { --angle: 252deg; --dist: 150px; background: #FFD700; animation-delay: 0.28s; }
.particle-15[b-0ys2ha630y] { --angle: 270deg; --dist: 140px; background: #70AFFB; animation-delay: 0.3s; }
.particle-16[b-0ys2ha630y] { --angle: 288deg; --dist: 165px; background: #FFD700; animation-delay: 0.32s; }
.particle-17[b-0ys2ha630y] { --angle: 306deg; --dist: 145px; background: #f5576c; animation-delay: 0.34s; }
.particle-18[b-0ys2ha630y] { --angle: 324deg; --dist: 155px; background: #FFD700; animation-delay: 0.36s; }
.particle-19[b-0ys2ha630y] { --angle: 342deg; --dist: 135px; background: #43e97b; animation-delay: 0.38s; }

.particle-0[b-0ys2ha630y], .particle-1[b-0ys2ha630y], .particle-2[b-0ys2ha630y], .particle-3[b-0ys2ha630y], .particle-4[b-0ys2ha630y],
.particle-5[b-0ys2ha630y], .particle-6[b-0ys2ha630y], .particle-7[b-0ys2ha630y], .particle-8[b-0ys2ha630y], .particle-9[b-0ys2ha630y],
.particle-10[b-0ys2ha630y], .particle-11[b-0ys2ha630y], .particle-12[b-0ys2ha630y], .particle-13[b-0ys2ha630y], .particle-14[b-0ys2ha630y],
.particle-15[b-0ys2ha630y], .particle-16[b-0ys2ha630y], .particle-17[b-0ys2ha630y], .particle-18[b-0ys2ha630y], .particle-19[b-0ys2ha630y] {
    animation: particle-burst-dir-b-0ys2ha630y 0.8s ease-out forwards;
}

@keyframes particle-burst-dir-b-0ys2ha630y {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--dist) * -1)) scale(0);
        opacity: 0;
    }
}

/* Sparkles */
.sparkle-container[b-0ys2ha630y] {
    position: absolute;
    width: 400px;
    height: 400px;
    pointer-events: none;
}

.sparkle[b-0ys2ha630y] {
    position: absolute;
    opacity: 0;
    animation: sparkle-pop-b-0ys2ha630y 1.5s ease-out forwards;
}

.sparkle[b-0ys2ha630y]  .rzi {
    font-size: 1.5rem;
    color: #FFD700;
    filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 20px #FFA500);
}

.sparkle-0[b-0ys2ha630y] { top: 10%; left: 20%; animation-delay: 0.1s; }
.sparkle-1[b-0ys2ha630y] { top: 15%; left: 75%; animation-delay: 0.3s; }
.sparkle-2[b-0ys2ha630y] { top: 30%; left: 10%; animation-delay: 0.5s; }
.sparkle-3[b-0ys2ha630y] { top: 25%; left: 85%; animation-delay: 0.2s; }
.sparkle-4[b-0ys2ha630y] { top: 60%; left: 15%; animation-delay: 0.4s; }
.sparkle-5[b-0ys2ha630y] { top: 70%; left: 80%; animation-delay: 0.6s; }
.sparkle-6[b-0ys2ha630y] { top: 80%; left: 25%; animation-delay: 0.15s; }
.sparkle-7[b-0ys2ha630y] { top: 85%; left: 70%; animation-delay: 0.35s; }
.sparkle-8[b-0ys2ha630y] { top: 45%; left: 5%; animation-delay: 0.55s; }
.sparkle-9[b-0ys2ha630y] { top: 50%; left: 90%; animation-delay: 0.25s; }
.sparkle-10[b-0ys2ha630y] { top: 5%; left: 50%; animation-delay: 0.45s; }
.sparkle-11[b-0ys2ha630y] { top: 90%; left: 45%; animation-delay: 0.65s; }

@keyframes sparkle-pop-b-0ys2ha630y {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    20% { transform: scale(1.5) rotate(20deg); opacity: 1; }
    40% { transform: scale(0.8) rotate(-10deg); opacity: 1; }
    60% { transform: scale(1.2) rotate(10deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(0deg); opacity: 0; }
}

/* Main XP display */
.xp-main[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.xp-icon-burst[b-0ys2ha630y] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.xp-ring[b-0ys2ha630y] {
    position: absolute;
    border-radius: 50%;
    border: 3px solid #FFD700;
    animation: ring-expand-b-0ys2ha630y 1s ease-out forwards;
}

.ring-1[b-0ys2ha630y] { width: 80px; height: 80px; animation-delay: 0s; }
.ring-2[b-0ys2ha630y] { width: 100px; height: 100px; animation-delay: 0.15s; border-color: #FFA500; }
.ring-3[b-0ys2ha630y] { width: 120px; height: 120px; animation-delay: 0.3s; border-color: #FFD700; }

@keyframes ring-expand-b-0ys2ha630y {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.xp-icon[b-0ys2ha630y] {
    animation: icon-pop-b-0ys2ha630y 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.xp-icon[b-0ys2ha630y]  .rzi {
    font-size: 3.5rem;
    color: #FFD700;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

@keyframes icon-pop-b-0ys2ha630y {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.xp-amount[b-0ys2ha630y] {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 8px rgba(255, 165, 0, 0.5));
    animation: amount-slam-b-0ys2ha630y 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
    transform: scale(0);
    letter-spacing: -2px;
}

@keyframes amount-slam-b-0ys2ha630y {
    0% { transform: scale(3) translateY(-20px); opacity: 0; }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.xp-label[b-0ys2ha630y] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFD700;
    letter-spacing: 8px;
    margin-top: 0.5rem;
    animation: label-fade-b-0ys2ha630y 0.5s ease 0.4s forwards;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

@keyframes label-fade-b-0ys2ha630y {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.xp-total[b-0ys2ha630y] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1rem;
    animation: label-fade-b-0ys2ha630y 0.5s ease 0.6s forwards;
    opacity: 0;
}

/* Floating numbers */
.floating-numbers[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.float-num[b-0ys2ha630y] {
    position: absolute;
    font-size: 1.25rem;
    font-weight: 700;
    color: #43e97b;
    opacity: 0;
    animation: float-up-b-0ys2ha630y 1.5s ease-out forwards;
    text-shadow: 0 0 10px rgba(67, 233, 123, 0.5);
}

.float-0[b-0ys2ha630y] { left: 20%; top: 50%; animation-delay: 0.1s; }
.float-1[b-0ys2ha630y] { left: 75%; top: 45%; animation-delay: 0.2s; }
.float-2[b-0ys2ha630y] { left: 15%; top: 60%; animation-delay: 0.3s; }
.float-3[b-0ys2ha630y] { left: 80%; top: 55%; animation-delay: 0.4s; }
.float-4[b-0ys2ha630y] { left: 25%; top: 40%; animation-delay: 0.5s; }
.float-5[b-0ys2ha630y] { left: 70%; top: 65%; animation-delay: 0.6s; }
.float-6[b-0ys2ha630y] { left: 30%; top: 70%; animation-delay: 0.7s; }
.float-7[b-0ys2ha630y] { left: 65%; top: 35%; animation-delay: 0.8s; }

@keyframes float-up-b-0ys2ha630y {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* ============================================
   LEVEL UP CELEBRATION
   ============================================ */

.levelup-celebration[b-0ys2ha630y] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

/* Epic burst rays */
.epic-burst[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: burst-rotate-b-0ys2ha630y 20s linear infinite;
}

@keyframes burst-rotate-b-0ys2ha630y {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.burst-ray[b-0ys2ha630y] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 50vh;
    background: linear-gradient(to top, transparent, rgba(255, 215, 0, 0.3), transparent);
    transform-origin: bottom center;
    animation: ray-pulse-b-0ys2ha630y 2s ease-in-out infinite;
}

.ray-1[b-0ys2ha630y] { transform: translateX(-50%) rotate(0deg); animation-delay: 0s; }
.ray-2[b-0ys2ha630y] { transform: translateX(-50%) rotate(45deg); animation-delay: 0.25s; }
.ray-3[b-0ys2ha630y] { transform: translateX(-50%) rotate(90deg); animation-delay: 0.5s; }
.ray-4[b-0ys2ha630y] { transform: translateX(-50%) rotate(135deg); animation-delay: 0.75s; }
.ray-5[b-0ys2ha630y] { transform: translateX(-50%) rotate(180deg); animation-delay: 1s; }
.ray-6[b-0ys2ha630y] { transform: translateX(-50%) rotate(225deg); animation-delay: 1.25s; }
.ray-7[b-0ys2ha630y] { transform: translateX(-50%) rotate(270deg); animation-delay: 1.5s; }
.ray-8[b-0ys2ha630y] { transform: translateX(-50%) rotate(315deg); animation-delay: 1.75s; }

@keyframes ray-pulse-b-0ys2ha630y {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Confetti */
.confetti-container[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.confetti[b-0ys2ha630y] {
    position: absolute;
    width: 12px;
    height: 12px;
    top: -20px;
    left: calc(50% + var(--x));
    animation: confetti-fall-b-0ys2ha630y 3s ease-out var(--delay) forwards;
}

.confetti-0[b-0ys2ha630y] { background: #FFD700; border-radius: 50%; }
.confetti-1[b-0ys2ha630y] { background: #FF6B6B; border-radius: 2px; }
.confetti-2[b-0ys2ha630y] { background: #4ECDC4; border-radius: 50%; }
.confetti-3[b-0ys2ha630y] { background: #A78BFA; border-radius: 2px; }
.confetti-4[b-0ys2ha630y] { background: #F472B6; border-radius: 50%; }
.confetti-5[b-0ys2ha630y] { background: #34D399; border-radius: 2px; }
.confetti-6[b-0ys2ha630y] { background: #60A5FA; border-radius: 50%; }
.confetti-7[b-0ys2ha630y] { background: #FBBF24; border-radius: 2px; }
.confetti-8[b-0ys2ha630y] { background: #F87171; border-radius: 50%; }
.confetti-9[b-0ys2ha630y] { background: #A3E635; border-radius: 2px; }

@keyframes confetti-fall-b-0ys2ha630y {
    0% {
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 1;
    }
    10% {
        transform: translateY(10vh) rotate(180deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* Level main display */
.level-main[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.level-pre-text[b-0ys2ha630y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #FFD700;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
    animation: pre-text-bounce-b-0ys2ha630y 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

.level-pre-text[b-0ys2ha630y]  .rzi {
    font-size: 2rem;
    color: #FFD700;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

@keyframes pre-text-bounce-b-0ys2ha630y {
    0% { transform: scale(0) translateY(-50px); opacity: 0; }
    60% { transform: scale(1.2) translateY(10px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.level-badge-container[b-0ys2ha630y] {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.level-glow[b-0ys2ha630y] {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: glow-pulse-b-0ys2ha630y 1.5s ease-in-out infinite;
}

@keyframes glow-pulse-b-0ys2ha630y {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

.level-badge[b-0ys2ha630y] {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 60px rgba(255, 215, 0, 0.8),
        inset 0 2px 10px rgba(255, 255, 255, 0.5),
        0 10px 40px rgba(0, 0, 0, 0.3);
    animation: badge-reveal-b-0ys2ha630y 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards;
    transform: scale(0) rotateY(180deg);
}

@keyframes badge-reveal-b-0ys2ha630y {
    0% { transform: scale(0) rotateY(180deg); }
    50% { transform: scale(1.2) rotateY(90deg); }
    100% { transform: scale(1) rotateY(0deg); }
}

.badge-inner[b-0ys2ha630y] {
    width: 130px;
    height: 130px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 215, 0, 0.5);
}

.badge-number[b-0ys2ha630y] {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}


.level-stars[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.star[b-0ys2ha630y] {
    position: absolute;
    animation: star-pop-b-0ys2ha630y 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    opacity: 0;
}

.star[b-0ys2ha630y]  .rzi {
    font-size: 2rem;
    color: #FFD700;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.star-1[b-0ys2ha630y] { top: -10px; left: 50%; transform: translateX(-50%); animation-delay: 0.8s; }
.star-2[b-0ys2ha630y] { bottom: 10px; left: 0; animation-delay: 0.9s; }
.star-3[b-0ys2ha630y] { bottom: 10px; right: 0; animation-delay: 1s; }

@keyframes star-pop-b-0ys2ha630y {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.level-text[b-0ys2ha630y] {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    letter-spacing: 6px;
    animation: level-text-appear-b-0ys2ha630y 0.6s ease 1s forwards;
    opacity: 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

@keyframes level-text-appear-b-0ys2ha630y {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.level-name[b-0ys2ha630y] {
    font-size: 1.25rem;
    color: #A78BFA;
    font-style: italic;
    margin-top: 0.5rem;
    animation: level-text-appear-b-0ys2ha630y 0.6s ease 1.2s forwards;
    opacity: 0;
}

.bonus-xp[b-0ys2ha630y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.2), rgba(56, 249, 215, 0.2));
    border: 2px solid #43e97b;
    border-radius: 30px;
    color: #43e97b;
    font-size: 1.25rem;
    font-weight: 700;
    animation: bonus-pop-b-0ys2ha630y 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.5s forwards;
    opacity: 0;
    transform: scale(0);
}

@keyframes bonus-pop-b-0ys2ha630y {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

.bonus-icon[b-0ys2ha630y] {
    display: flex;
    animation: gift-shake-b-0ys2ha630y 0.5s ease 2s;
}

.bonus-icon[b-0ys2ha630y]  .rzi {
    font-size: 1.5rem;
    color: #43e97b;
}

@keyframes gift-shake-b-0ys2ha630y {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* Fireworks */
.fireworks[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.firework[b-0ys2ha630y] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: firework-burst-b-0ys2ha630y 1.5s ease-out forwards;
}

.fw-1[b-0ys2ha630y] { top: 20%; left: 20%; background: #FF6B6B; animation-delay: 0.5s; }
.fw-2[b-0ys2ha630y] { top: 25%; right: 25%; background: #4ECDC4; animation-delay: 1s; }
.fw-3[b-0ys2ha630y] { top: 60%; left: 30%; background: #A78BFA; animation-delay: 1.5s; }

@keyframes firework-burst-b-0ys2ha630y {
    0% { 
        transform: scale(1);
        box-shadow: 
            0 0 0 0 currentColor,
            0 0 0 0 currentColor,
            0 0 0 0 currentColor,
            0 0 0 0 currentColor,
            0 0 0 0 currentColor,
            0 0 0 0 currentColor,
            0 0 0 0 currentColor,
            0 0 0 0 currentColor;
    }
    50% {
        box-shadow: 
            0 -60px 0 0 currentColor,
            42px -42px 0 0 currentColor,
            60px 0 0 0 currentColor,
            42px 42px 0 0 currentColor,
            0 60px 0 0 currentColor,
            -42px 42px 0 0 currentColor,
            -60px 0 0 0 currentColor,
            -42px -42px 0 0 currentColor;
    }
    100% {
        transform: scale(0);
        box-shadow: 
            0 -100px 0 -5px transparent,
            70px -70px 0 -5px transparent,
            100px 0 0 -5px transparent,
            70px 70px 0 -5px transparent,
            0 100px 0 -5px transparent,
            -70px 70px 0 -5px transparent,
            -100px 0 0 -5px transparent,
            -70px -70px 0 -5px transparent;
    }
}

/* ============================================
   STREAK MILESTONE CELEBRATION
   Pure CSS Fire - Three tiers: warm, blaze, inferno
   ============================================ */

.streak-celebration[b-0ys2ha630y] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* === HEAT SHIMMER BACKGROUND === */
.heat-shimmer[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center bottom, rgba(255, 100, 50, 0.15) 0%, transparent 60%);
    animation: shimmer-b-0ys2ha630y 3s ease-in-out infinite;
}

.tier-blaze .heat-shimmer[b-0ys2ha630y] {
    background: radial-gradient(ellipse at center bottom, rgba(255, 150, 50, 0.2) 0%, rgba(255, 50, 50, 0.1) 40%, transparent 70%);
}

.tier-inferno .heat-shimmer[b-0ys2ha630y] {
    background: radial-gradient(ellipse at center bottom, rgba(100, 150, 255, 0.15) 0%, rgba(255, 100, 50, 0.2) 30%, rgba(255, 200, 50, 0.1) 50%, transparent 70%);
}

@keyframes shimmer-b-0ys2ha630y {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* === FLOATING EMBERS === */
.ember-field[b-0ys2ha630y] {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.ember[b-0ys2ha630y] {
    position: absolute;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    /* Start at random vertical positions using negative delay */
    animation: ember-rise-b-0ys2ha630y var(--duration) ease-out infinite;
    animation-delay: calc(var(--i) * -0.3s);
}

.tier-warm .ember[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFD700 0%, #FF6B35 50%, transparent 70%);
    box-shadow: 0 0 6px #FF6B35;
}

.tier-blaze .ember[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #FFD700 30%, #FF4500 70%, transparent 100%);
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FF4500;
}

.tier-inferno .ember[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #60A5FA 40%, #7C3AED 80%, transparent 100%);
    box-shadow: 0 0 8px #FFF, 0 0 15px #60A5FA, 0 0 25px #7C3AED;
}

@keyframes ember-rise-b-0ys2ha630y {
    0% {
        bottom: 25%;
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        bottom: 95%;
        transform: translateY(0) scale(0.3);
        opacity: 0;
    }
}

/* === SPARKLER FIRE === */
.fire-container[b-0ys2ha630y] {
    position: relative;
    width: 140px;
    height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fire-appear-b-0ys2ha630y 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes fire-appear-b-0ys2ha630y {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.sparkler-fire[b-0ys2ha630y] {
    position: relative;
    width: 50px;
    height: 4px;
}

/* Individual spark particles */
.spark[b-0ys2ha630y] {
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    border-radius: 50%;
    animation: spark-rise-b-0ys2ha630y var(--dur) ease-out infinite;
    animation-delay: var(--delay);
}

/* Core sparks - bright white/yellow center, largest */
.spark-core[b-0ys2ha630y] {
    width: 8px;
    height: 8px;
}

.tier-warm .spark-core[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #FFD700 40%, #FF6B35 100%);
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FF6B35;
}

.tier-blaze .spark-core[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #FFF 40%, #FFD700 80%, #FF4500 100%);
    box-shadow: 0 0 12px #FFF, 0 0 25px #FFD700;
}

.tier-inferno .spark-core[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #60A5FA 50%, #7C3AED 100%);
    box-shadow: 0 0 10px #FFF, 0 0 20px #60A5FA, 0 0 30px #7C3AED;
}

/* Inner sparks - dense orange/gold */
.spark-inner[b-0ys2ha630y] {
    width: 6px;
    height: 6px;
}

.tier-warm .spark-inner[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #FFD700 50%, #FF6B35 100%);
    box-shadow: 0 0 8px #FFD700, 0 0 15px #FF6B35;
}

.tier-blaze .spark-inner[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFF 0%, #FFD700 40%, #FF4500 100%);
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FF4500;
}

.tier-inferno .spark-inner[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFD700 0%, #FF4500 40%, #7C3AED 100%);
    box-shadow: 0 0 8px #FFD700, 0 0 15px #7C3AED;
}

/* Mid sparks - orange/gold */
.spark-mid[b-0ys2ha630y] {
    width: 5px;
    height: 5px;
}

.tier-warm .spark-mid[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFD700 0%, #FF6B35 60%, #FF4500 100%);
    box-shadow: 0 0 6px #FF6B35;
}

.tier-blaze .spark-mid[b-0ys2ha630y] {
    background: radial-gradient(circle, #FFD700 0%, #FF4500 60%, #DC2626 100%);
    box-shadow: 0 0 8px #FF4500;
}

.tier-inferno .spark-mid[b-0ys2ha630y] {
    background: radial-gradient(circle, #FF4500 0%, #7C3AED 60%, #4C1D95 100%);
    box-shadow: 0 0 6px #FF4500, 0 0 12px #7C3AED;
}

/* Outer sparks - dimmer, smaller wisps */
.spark-outer[b-0ys2ha630y] {
    width: 4px;
    height: 4px;
}

.tier-warm .spark-outer[b-0ys2ha630y] {
    background: radial-gradient(circle, #FF6B35 0%, #FF4500 70%, transparent 100%);
    box-shadow: 0 0 4px #FF4500;
}

.tier-blaze .spark-outer[b-0ys2ha630y] {
    background: radial-gradient(circle, #FF4500 0%, #DC2626 70%, transparent 100%);
    box-shadow: 0 0 5px #FF4500;
}

.tier-inferno .spark-outer[b-0ys2ha630y] {
    background: radial-gradient(circle, #7C3AED 0%, #4C1D95 70%, transparent 100%);
    box-shadow: 0 0 4px #7C3AED;
}

/* Spark rise animation - fountain burst upward */
@keyframes spark-rise-b-0ys2ha630y {
    0% { 
        transform: translateY(0) translateX(0) scale(0.3); 
        opacity: 0;
    }
    10% {
        transform: translateY(calc(var(--rise) * -0.1)) translateX(0) scale(1.2);
        opacity: 1;
    }
    30% { 
        transform: translateY(calc(var(--rise) * -0.4)) translateX(4px) scale(1); 
        opacity: 1;
    }
    50% { 
        transform: translateY(calc(var(--rise) * -0.6)) translateX(-3px) scale(0.9); 
        opacity: 0.9;
    }
    70% { 
        transform: translateY(calc(var(--rise) * -0.85)) translateX(2px) scale(0.7); 
        opacity: 0.6;
    }
    100% { 
        transform: translateY(calc(var(--rise) * -1)) translateX(0) scale(0.3); 
        opacity: 0;
    }
}

/* Fire glow underneath */
.fire-glow[b-0ys2ha630y] {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 40px;
    border-radius: 50%;
    animation: glow-pulse-b-0ys2ha630y 1s ease-in-out infinite;
}

.tier-warm .fire-glow[b-0ys2ha630y] {
    background: radial-gradient(ellipse, rgba(255, 107, 53, 0.6) 0%, transparent 70%);
}

.tier-blaze .fire-glow[b-0ys2ha630y] {
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.7) 0%, rgba(255, 69, 0, 0.4) 50%, transparent 70%);
}

.tier-inferno .fire-glow[b-0ys2ha630y] {
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.5) 0%, rgba(65, 105, 225, 0.4) 40%, rgba(124, 58, 237, 0.3) 60%, transparent 80%);
}

@keyframes glow-pulse-b-0ys2ha630y {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

/* Fire base/log */
.fire-base[b-0ys2ha630y] {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 15px;
    background: linear-gradient(90deg, #2D1810, #4A2C20, #2D1810);
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

/* === STREAK COUNTER === */
.streak-counter[b-0ys2ha630y] {
    text-align: center;
    margin-top: 2rem;
    z-index: 10;
    animation: counter-appear-b-0ys2ha630y 0.5s ease 0.3s both;
}

@keyframes counter-appear-b-0ys2ha630y {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.streak-number[b-0ys2ha630y] {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    color: #FFD700; /* Fallback color */
}

.tier-warm .streak-number[b-0ys2ha630y] {
    background: linear-gradient(180deg, #FFD700 0%, #FF9F1C 50%, #FF6B35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 10px rgba(255, 107, 53, 0.5));
}

.tier-blaze .streak-number[b-0ys2ha630y] {
    background: linear-gradient(180deg, #FFF 0%, #FFD700 40%, #FF6B6B 80%, #DC2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 15px rgba(255, 215, 0, 0.6));
}

.tier-inferno .streak-number[b-0ys2ha630y] {
    background: linear-gradient(180deg, #FFF 0%, #60A5FA 40%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 20px rgba(124, 58, 237, 0.7));
}

.streak-unit[b-0ys2ha630y] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 6px;
    margin-top: 0.25rem;
}

.tier-warm .streak-unit[b-0ys2ha630y] { color: #FF9F1C; }
.tier-blaze .streak-unit[b-0ys2ha630y] { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.tier-inferno .streak-unit[b-0ys2ha630y] { color: #A78BFA; text-shadow: 0 0 15px rgba(167, 139, 250, 0.7); }

/* === STREAK TITLE === */
.streak-title[b-0ys2ha630y] {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 8px;
    margin-top: 0.5rem;
    animation: title-appear-b-0ys2ha630y 0.5s ease 0.5s both;
}

.tier-warm .streak-title[b-0ys2ha630y] { color: #FF6B35; }
.tier-blaze .streak-title[b-0ys2ha630y] { 
    color: #FFD700; 
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    animation: title-appear-b-0ys2ha630y 0.5s ease 0.5s both, title-glow-b-0ys2ha630y 1.5s ease-in-out infinite;
}
.tier-inferno .streak-title[b-0ys2ha630y] { 
    color: #60A5FA; 
    text-shadow: 0 0 20px #4169E1, 0 0 40px #7C3AED;
    animation: title-appear-b-0ys2ha630y 0.5s ease 0.5s both, title-glow-inferno-b-0ys2ha630y 1s ease-in-out infinite;
}

@keyframes title-appear-b-0ys2ha630y {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes title-glow-b-0ys2ha630y {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { text-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 50px rgba(255, 100, 50, 0.5); }
}

@keyframes title-glow-inferno-b-0ys2ha630y {
    0%, 100% { text-shadow: 0 0 20px #4169E1, 0 0 40px #7C3AED; }
    50% { text-shadow: 0 0 30px #60A5FA, 0 0 60px #4169E1, 0 0 90px #7C3AED; }
}

/* === STREAK XP BADGE === */
.streak-xp-badge[b-0ys2ha630y] {
    margin-top: 1.5rem;
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    animation: xp-pop-b-0ys2ha630y 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.8s both;
}

.tier-warm .streak-xp-badge[b-0ys2ha630y] { 
    background: rgba(67, 233, 123, 0.15); 
    border: 2px solid #43e97b; 
    color: #43e97b; 
}
.tier-blaze .streak-xp-badge[b-0ys2ha630y] { 
    background: rgba(255, 215, 0, 0.15); 
    border: 2px solid #FFD700; 
    color: #FFD700; 
}
.tier-inferno .streak-xp-badge[b-0ys2ha630y] { 
    background: rgba(167, 139, 250, 0.2); 
    border: 2px solid #A78BFA; 
    color: #A78BFA;
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.3);
}

@keyframes xp-pop-b-0ys2ha630y {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   BADGE EARNED CELEBRATION
   Pure CSS Medal with ribbons
   ============================================ */

.badge-celebration[b-0ys2ha630y] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* === LIGHT RAYS === */
.light-rays[b-0ys2ha630y] {
    position: absolute;
    width: 350px;
    height: 350px;
    animation: rays-rotate-b-0ys2ha630y 20s linear infinite;
}

@keyframes rays-rotate-b-0ys2ha630y {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ray[b-0ys2ha630y] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 175px;
    background: linear-gradient(to top, transparent 0%, rgba(255, 215, 0, 0.5) 50%, transparent 100%);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(calc(var(--i) * 30deg));
    opacity: 0;
    animation: ray-fade-b-0ys2ha630y 0.8s ease calc(var(--i) * 0.05s) forwards;
}

@keyframes ray-fade-b-0ys2ha630y {
    0% { opacity: 0; height: 0; }
    100% { opacity: 0.6; height: 175px; }
}

/* === SPARKLE RING === */
.sparkle-ring[b-0ys2ha630y] {
    position: absolute;
    width: 250px;
    height: 250px;
}

.sparkle[b-0ys2ha630y] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFD700;
    transform: rotate(calc(var(--i) * 22.5deg)) translateY(-120px);
    opacity: 0;
    animation: sparkle-twinkle-b-0ys2ha630y 1.5s ease var(--delay) infinite;
}

@keyframes sparkle-twinkle-b-0ys2ha630y {
    0%, 100% { opacity: 0; transform: rotate(calc(var(--i) * 22.5deg)) translateY(-120px) scale(0.5); }
    50% { opacity: 1; transform: rotate(calc(var(--i) * 22.5deg)) translateY(-120px) scale(1.2); }
}

/* === MEDAL CONTAINER === */
.medal-container[b-0ys2ha630y] {
    position: relative;
    z-index: 10;
    animation: medal-bounce-b-0ys2ha630y 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes medal-bounce-b-0ys2ha630y {
    0% { transform: scale(0) translateY(-50px); opacity: 0; }
    60% { transform: scale(1.15) translateY(10px); }
    80% { transform: scale(0.95) translateY(-5px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.medal-glow[b-0ys2ha630y] {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: medal-glow-pulse-b-0ys2ha630y 2s ease-in-out infinite;
}

@keyframes medal-glow-pulse-b-0ys2ha630y {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.medal[b-0ys2ha630y] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ribbons */
.medal-ribbon[b-0ys2ha630y] {
    position: absolute;
    top: -15px;
    left: 30px;
    width: 25px;
    height: 50px;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 50%, #991B1B 100%);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    transform: rotate(-15deg);
    z-index: -1;
}

.medal-ribbon-right[b-0ys2ha630y] {
    left: auto;
    right: 30px;
    transform: rotate(15deg);
    background: linear-gradient(225deg, #DC2626 0%, #B91C1C 50%, #991B1B 100%);
}

/* Medal body */
.medal-body[b-0ys2ha630y] {
    width: 100px;
    height: 100px;
    background: linear-gradient(145deg, #FFD700 0%, #FFC107 25%, #FFB300 50%, #FFA000 75%, #FF8F00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(255, 193, 7, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    border: 4px solid #B8860B;
}

.medal-inner[b-0ys2ha630y] {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #FFC107 0%, #FFD54F 50%, #FFC107 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #DAA520;
}

/* Star inside medal */
.medal-star[b-0ys2ha630y] {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #FFE082 0%, #FFD54F 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* === BADGE TEXT === */
.badge-text-container[b-0ys2ha630y] {
    text-align: center;
    margin-top: 1.5rem;
    animation: text-appear-b-0ys2ha630y 0.5s ease 0.5s both;
}

@keyframes text-appear-b-0ys2ha630y {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.badge-label[b-0ys2ha630y] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 0.5rem;
}

.badge-name[b-0ys2ha630y] {
    font-size: 2rem;
    font-weight: 900;
    color: #FFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* === BADGE XP REWARD === */
.badge-xp-reward[b-0ys2ha630y] {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: rgba(67, 233, 123, 0.15);
    border: 2px solid #43e97b;
    border-radius: 25px;
    color: #43e97b;
    font-weight: 700;
    font-size: 1.1rem;
    animation: xp-pop-b-0ys2ha630y 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.8s both;
}

/* ============================================
   ONBOARDING COMPLETE CELEBRATION
   Welcome to the team - confetti & checkmark burst
   ============================================ */

.onboarding-celebration[b-0ys2ha630y] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* === WELCOME SPARKLES === */
.welcome-sparkles[b-0ys2ha630y] {
    position: absolute;
    width: 300px;
    height: 300px;
}

.welcome-sparkle[b-0ys2ha630y] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #43e97b;
    border-radius: 50%;
    box-shadow: 0 0 10px #43e97b, 0 0 20px #38f9d7;
    transform: rotate(calc(var(--i) * 18deg)) translateY(-140px);
    opacity: 0;
    animation: welcome-sparkle-burst-b-0ys2ha630y 1.5s ease var(--delay) forwards;
}

@keyframes welcome-sparkle-burst-b-0ys2ha630y {
    0% { 
        opacity: 0; 
        transform: rotate(calc(var(--i) * 18deg)) translateY(0) scale(0); 
    }
    30% { 
        opacity: 1; 
        transform: rotate(calc(var(--i) * 18deg)) translateY(-140px) scale(1.2); 
    }
    100% { 
        opacity: 0; 
        transform: rotate(calc(var(--i) * 18deg)) translateY(-180px) scale(0); 
    }
}

/* === WELCOME MAIN CONTENT === */
.welcome-main[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.welcome-icon-container[b-0ys2ha630y] {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.welcome-glow[b-0ys2ha630y] {
    position: absolute;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(67, 233, 123, 0.6) 0%, rgba(56, 249, 215, 0.3) 50%, transparent 70%);
    border-radius: 50%;
    animation: welcome-glow-pulse-b-0ys2ha630y 1.5s ease-in-out infinite;
}

@keyframes welcome-glow-pulse-b-0ys2ha630y {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

.welcome-ring[b-0ys2ha630y] {
    position: absolute;
    border-radius: 50%;
    border: 3px solid #43e97b;
    animation: welcome-ring-expand-b-0ys2ha630y 1.2s ease-out forwards;
}

.welcome-ring.ring-1[b-0ys2ha630y] { width: 80px; height: 80px; animation-delay: 0s; }
.welcome-ring.ring-2[b-0ys2ha630y] { width: 100px; height: 100px; animation-delay: 0.15s; border-color: #38f9d7; }
.welcome-ring.ring-3[b-0ys2ha630y] { width: 120px; height: 120px; animation-delay: 0.3s; border-color: #43e97b; }

@keyframes welcome-ring-expand-b-0ys2ha630y {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.welcome-icon[b-0ys2ha630y] {
    animation: welcome-icon-pop-b-0ys2ha630y 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.welcome-icon[b-0ys2ha630y]  .rzi {
    font-size: 5rem;
    color: #43e97b;
    filter: drop-shadow(0 0 30px rgba(67, 233, 123, 0.8));
}

@keyframes welcome-icon-pop-b-0ys2ha630y {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* === WELCOME TEXT === */
.welcome-text[b-0ys2ha630y] {
    text-align: center;
    margin-bottom: 0.5rem;
}

.welcome-label[b-0ys2ha630y] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: #38f9d7;
    text-shadow: 0 0 20px rgba(56, 249, 215, 0.5);
    animation: welcome-label-appear-b-0ys2ha630y 0.5s ease 0.3s both;
}

@keyframes welcome-label-appear-b-0ys2ha630y {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.welcome-name[b-0ys2ha630y] {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(180deg, #FFF 0%, #43e97b 50%, #38f9d7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 10px rgba(67, 233, 123, 0.4));
    animation: welcome-name-slam-b-0ys2ha630y 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
}

@keyframes welcome-name-slam-b-0ys2ha630y {
    0% { transform: scale(2) translateY(-30px); opacity: 0; }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.welcome-subtitle[b-0ys2ha630y] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
    animation: welcome-subtitle-fade-b-0ys2ha630y 0.5s ease 0.6s both;
}

@keyframes welcome-subtitle-fade-b-0ys2ha630y {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* === WELCOME XP BADGE === */
.welcome-xp-badge[b-0ys2ha630y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
    border: 2px solid #FFD700;
    border-radius: 30px;
    color: #FFD700;
    font-size: 1.25rem;
    font-weight: 700;
    animation: welcome-xp-pop-b-0ys2ha630y 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.8s both;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.welcome-xp-badge[b-0ys2ha630y]  .rzi {
    font-size: 1.5rem;
    color: #FFD700;
    animation: welcome-star-spin-b-0ys2ha630y 1s ease 1.2s;
}

@keyframes welcome-xp-pop-b-0ys2ha630y {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes welcome-star-spin-b-0ys2ha630y {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === WELCOME FEATURES === */
.welcome-features[b-0ys2ha630y] {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    animation: welcome-features-appear-b-0ys2ha630y 0.5s ease 1s both;
}

@keyframes welcome-features-appear-b-0ys2ha630y {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.welcome-feature[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.welcome-feature:nth-child(1)[b-0ys2ha630y] { animation-delay: 1s; }
.welcome-feature:nth-child(2)[b-0ys2ha630y] { animation-delay: 1.1s; }
.welcome-feature:nth-child(3)[b-0ys2ha630y] { animation-delay: 1.2s; }

.welcome-feature[b-0ys2ha630y]  .rzi {
    font-size: 2rem;
    color: #43e97b;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .xp-amount[b-0ys2ha630y] {
        font-size: 3rem;
    }
    
    .xp-label[b-0ys2ha630y] {
        font-size: 1.25rem;
        letter-spacing: 4px;
    }
    
    .level-badge-container[b-0ys2ha630y] {
        width: 140px;
        height: 140px;
    }
    
    .level-badge[b-0ys2ha630y] {
        width: 120px;
        height: 120px;
    }
    
    .badge-inner[b-0ys2ha630y] {
        width: 100px;
        height: 100px;
    }
    
    .badge-number[b-0ys2ha630y] {
        font-size: 3rem;
    }
    
    .level-text[b-0ys2ha630y] {
        font-size: 2rem;
    }
    
    /* Streak mobile */
    .fire-container[b-0ys2ha630y] {
        width: 90px;
        height: 120px;
    }
    
    .fire[b-0ys2ha630y] {
        width: 60px;
        height: 90px;
    }
    
    .flame-main[b-0ys2ha630y] {
        width: 40px;
        height: 75px;
    }
    
    .flame-left[b-0ys2ha630y],
    .flame-right[b-0ys2ha630y] {
        width: 28px;
        height: 55px;
    }
    
    .streak-number[b-0ys2ha630y] {
        font-size: 3.5rem;
    }
    
    .streak-unit[b-0ys2ha630y] {
        font-size: 1rem;
        letter-spacing: 4px;
    }
    
    .streak-title[b-0ys2ha630y] {
        font-size: 1.5rem;
        letter-spacing: 4px;
    }
    
    /* Badge mobile */
    .medal-body[b-0ys2ha630y] {
        width: 80px;
        height: 80px;
    }
    
    .medal-inner[b-0ys2ha630y] {
        width: 64px;
        height: 64px;
    }
    
    .medal-star[b-0ys2ha630y] {
        width: 30px;
        height: 30px;
    }
    
    .badge-name[b-0ys2ha630y] {
        font-size: 1.5rem;
    }
    
    .light-rays[b-0ys2ha630y] {
            width: 250px;
            height: 250px;
        }
    
        /* Onboarding mobile */
        .welcome-name[b-0ys2ha630y] {
            font-size: 2.25rem;
        }
    
        .welcome-icon[b-0ys2ha630y]  .rzi {
            font-size: 4rem;
        }
    
        .welcome-features[b-0ys2ha630y] {
            gap: 0.75rem;
        }
    
        .welcome-feature[b-0ys2ha630y] {
            padding: 0.75rem;
            font-size: 0.75rem;
        }
    
        .welcome-feature[b-0ys2ha630y]  .rzi {
            font-size: 1.5rem;
        }
    }

/* ============================================
   MILESTONE CLAIMED - Present Box Celebration
   ============================================ */

.milestone-celebration[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Sparkle field background */
.ms-sparkle-field[b-0ys2ha630y] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ms-sparkle[b-0ys2ha630y] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: white;
    border-radius: 50%;
    animation: ms-twinkle-b-0ys2ha630y 1.5s ease-in-out infinite var(--delay);
    opacity: 0;
}

@keyframes ms-twinkle-b-0ys2ha630y {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* ===== PRESENT BOX ===== */
.present-box-container[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: present-enter-b-0ys2ha630y 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
}

.present-box-container.exploded[b-0ys2ha630y] {
    animation: present-explode-b-0ys2ha630y 0.5s ease-out forwards;
    pointer-events: none;
}

.present-glow[b-0ys2ha630y] {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
    animation: present-glow-pulse-b-0ys2ha630y 2s ease-in-out infinite;
}

.rarity-epic .present-glow[b-0ys2ha630y],
.present-box-container:has(.rarity-epic) .present-glow[b-0ys2ha630y] {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
}

.rarity-legendary .present-glow[b-0ys2ha630y],
.present-box-container:has(.rarity-legendary) .present-glow[b-0ys2ha630y] {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.5) 0%, transparent 70%);
}

@keyframes present-glow-pulse-b-0ys2ha630y {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.present-box[b-0ys2ha630y] {
    width: 120px;
    height: 120px;
    position: relative;
    animation: present-wobble-b-0ys2ha630y 1.8s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes present-wobble-b-0ys2ha630y {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-6deg) scale(1.03); }
    30% { transform: rotate(5deg) scale(1.03); }
    45% { transform: rotate(-4deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(-1deg); }
}

@keyframes present-enter-b-0ys2ha630y {
    0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
    60% { transform: scale(1.1) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes present-explode-b-0ys2ha630y {
    0% { opacity: 1; transform: scale(1); }
    30% { transform: scale(1.3); }
    100% { opacity: 0; transform: scale(0) rotate(30deg); }
}

/* Present lid */
.present-lid[b-0ys2ha630y] {
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    height: 32px;
    background: linear-gradient(180deg, #DC2626 0%, #B91C1C 100%);
    border-radius: 8px 8px 0 0;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.rarity-uncommon .present-lid[b-0ys2ha630y] { background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%); }
.rarity-rare .present-lid[b-0ys2ha630y] { background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%); }
.rarity-epic .present-lid[b-0ys2ha630y] { background: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 100%); }
.rarity-legendary .present-lid[b-0ys2ha630y] { background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%); }

.lid-ribbon[b-0ys2ha630y] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 100%;
    background: linear-gradient(90deg, #FDE68A 0%, #FBBF24 50%, #FDE68A 100%);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}

/* Present body */
.present-body[b-0ys2ha630y] {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    overflow: hidden;
}

.rarity-uncommon .present-body[b-0ys2ha630y] { background: linear-gradient(180deg, #4ADE80 0%, #22C55E 100%); }
.rarity-rare .present-body[b-0ys2ha630y] { background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%); }
.rarity-epic .present-body[b-0ys2ha630y] { background: linear-gradient(180deg, #A78BFA 0%, #8B5CF6 100%); }
.rarity-legendary .present-body[b-0ys2ha630y] { background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%); }

.body-ribbon-v[b-0ys2ha630y] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 100%;
    background: linear-gradient(90deg, #FDE68A 0%, #FBBF24 50%, #FDE68A 100%);
}

.body-ribbon-h[b-0ys2ha630y] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 22px;
    background: linear-gradient(180deg, #FDE68A 0%, #FBBF24 50%, #FDE68A 100%);
}

.present-tap-hint[b-0ys2ha630y] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 600;
    animation: pulse-fade-b-0ys2ha630y 1.5s ease-in-out infinite;
    margin-top: 0.5rem;
}

/* ===== EXPLOSION PARTICLES ===== */
.ms-explosion[b-0ys2ha630y] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ms-particle[b-0ys2ha630y] {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #FBBF24;
    animation: ms-particle-fly-b-0ys2ha630y 0.8s ease-out var(--delay) forwards;
    opacity: 1;
}

.ms-particle.rarity-uncommon[b-0ys2ha630y] { background: #4ADE80; }
.ms-particle.rarity-rare[b-0ys2ha630y] { background: #60A5FA; }
.ms-particle.rarity-epic[b-0ys2ha630y] { background: #A78BFA; }
.ms-particle.rarity-legendary[b-0ys2ha630y] { background: #FBBF24; }

@keyframes ms-particle-fly-b-0ys2ha630y {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% {
        transform: translate(
            calc(cos(var(--angle)) * var(--dist)),
            calc(sin(var(--angle)) * var(--dist))
        ) scale(0);
        opacity: 0;
    }
}

/* ===== REVEALED CONTENT ===== */
.ms-reveal[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: ms-reveal-enter-b-0ys2ha630y 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    animation-delay: 0.2s;
}

@keyframes ms-reveal-enter-b-0ys2ha630y {
    0% { opacity: 0; transform: scale(0.5) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.ms-reveal-label[b-0ys2ha630y] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #F59E0B;
    text-transform: uppercase;
}

/* Item frame */
.ms-item-frame[b-0ys2ha630y] {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.ms-item-frame.rarity-uncommon[b-0ys2ha630y] { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 30px rgba(74, 222, 128, 0.2); }
.ms-item-frame.rarity-rare[b-0ys2ha630y] { border-color: rgba(96, 165, 250, 0.5); box-shadow: 0 0 30px rgba(96, 165, 250, 0.2); }
.ms-item-frame.rarity-epic[b-0ys2ha630y] { border-color: rgba(167, 139, 250, 0.5); box-shadow: 0 0 30px rgba(167, 139, 250, 0.3); }
.ms-item-frame.rarity-legendary[b-0ys2ha630y] { border-color: rgba(251, 191, 36, 0.6); box-shadow: 0 0 40px rgba(251, 191, 36, 0.3); }

.ms-item-glow[b-0ys2ha630y] {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: ms-item-glow-pulse-b-0ys2ha630y 2s ease-in-out infinite;
}

@keyframes ms-item-glow-pulse-b-0ys2ha630y {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.ms-item-image[b-0ys2ha630y] {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
    animation: ms-item-float-b-0ys2ha630y 3s ease-in-out infinite;
}

@keyframes ms-item-float-b-0ys2ha630y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ms-item-fallback[b-0ys2ha630y] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-item-fallback[b-0ys2ha630y]  .rzi {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.7);
}

.ms-item-name[b-0ys2ha630y] {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-align: center;
}

.ms-item-type[b-0ys2ha630y] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* XP-only reveal */
.ms-xp-frame[b-0ys2ha630y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ms-xp-icon[b-0ys2ha630y] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
    animation: ms-item-float-b-0ys2ha630y 3s ease-in-out infinite;
}

.ms-xp-icon[b-0ys2ha630y]  .rzi {
    font-size: 40px;
    color: white;
}

.ms-xp-amount[b-0ys2ha630y] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FBBF24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* Rarity badge */
.ms-rarity-badge[b-0ys2ha630y] {
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ms-rarity-badge.rarity-uncommon[b-0ys2ha630y] { background: rgba(74, 222, 128, 0.2); color: #4ADE80; border: 1px solid rgba(74, 222, 128, 0.3); }
.ms-rarity-badge.rarity-rare[b-0ys2ha630y] { background: rgba(96, 165, 250, 0.2); color: #60A5FA; border: 1px solid rgba(96, 165, 250, 0.3); }
.ms-rarity-badge.rarity-epic[b-0ys2ha630y] { background: rgba(167, 139, 250, 0.2); color: #A78BFA; border: 1px solid rgba(167, 139, 250, 0.3); }
.ms-rarity-badge.rarity-legendary[b-0ys2ha630y] { background: rgba(251, 191, 36, 0.2); color: #FBBF24; border: 1px solid rgba(251, 191, 36, 0.3); }

@media (max-width: 480px) {
    .present-box[b-0ys2ha630y] {
        width: 100px;
        height: 100px;
    }
    .present-body[b-0ys2ha630y] { height: 75px; }
    .present-lid[b-0ys2ha630y] { height: 26px; }
    .ms-item-frame[b-0ys2ha630y] { width: 110px; height: 110px; }
    .ms-item-image[b-0ys2ha630y] { width: 80px; height: 80px; }
    .ms-item-name[b-0ys2ha630y] { font-size: 1.1rem; }
    .ms-xp-amount[b-0ys2ha630y] { font-size: 2rem; }
}
/* /Components/Shared/PushNotificationSettings.razor.rz.scp.css */
/* ============================================
   PUSH NOTIFICATION SETTINGS STYLES
   ============================================ */

.notification-settings[b-h3bcswjsei] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.notification-header[b-h3bcswjsei] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.notification-icon[b-h3bcswjsei] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notification-icon .rzi[b-h3bcswjsei] {
        font-size: 24px;
        color: white;
    }

.notification-info h5[b-h3bcswjsei] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
}

.notification-info p[b-h3bcswjsei] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748B;
}

/* ============================================
   BROWSER SUPPORT SECTION
   ============================================ */

.browser-support-section[b-h3bcswjsei] {
    background: #F8FAFC;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #E2E8F0;
}

.support-row[b-h3bcswjsei] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E2E8F0;
}

    .support-row:last-of-type[b-h3bcswjsei] {
        border-bottom: none;
    }

.support-label[b-h3bcswjsei] {
    font-size: 0.85rem;
    color: #64748B;
    font-weight: 500;
}

.support-status[b-h3bcswjsei] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

    .support-status .rzi[b-h3bcswjsei] {
        font-size: 16px;
    }

    .support-status.supported[b-h3bcswjsei] {
        color: #059669;
    }

        .support-status.supported .rzi[b-h3bcswjsei] {
            color: #10B981;
        }

    .support-status.not-supported[b-h3bcswjsei] {
        color: #DC2626;
    }

        .support-status.not-supported .rzi[b-h3bcswjsei] {
            color: #EF4444;
        }

    .support-status.limited[b-h3bcswjsei] {
        color: #D97706;
    }

        .support-status.limited .rzi[b-h3bcswjsei] {
            color: #F59E0B;
        }

.install-hint[b-h3bcswjsei] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #EFF6FF;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #1E40AF;
}

    .install-hint .rzi[b-h3bcswjsei] {
        color: #3B82F6;
        font-size: 18px;
        flex-shrink: 0;
    }

.browser-hint[b-h3bcswjsei] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #FEF3C7;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #92400E;
}

    .browser-hint .rzi[b-h3bcswjsei] {
        color: #D97706;
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .browser-hint strong[b-h3bcswjsei] {
        display: block;
        margin-bottom: 0.15rem;
    }

    .browser-hint span[b-h3bcswjsei] {
        display: block;
        color: #78350F;
    }

/* Toggle Section */
.notification-toggle[b-h3bcswjsei] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #F8FAFC;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.toggle-label[b-h3bcswjsei] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #1E293B;
}

    .toggle-label .rzi[b-h3bcswjsei] {
        color: #70AFFB;
        animation: spin-b-h3bcswjsei 1s linear infinite;
    }

@keyframes spin-b-h3bcswjsei {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Unsupported / Denied States */
.notification-unsupported[b-h3bcswjsei],
.notification-denied[b-h3bcswjsei] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
}

.notification-unsupported[b-h3bcswjsei] {
    background: #FEF3C7;
    color: #92400E;
}

    .notification-unsupported .rzi[b-h3bcswjsei] {
        color: #D97706;
        font-size: 20px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .notification-unsupported strong[b-h3bcswjsei] {
        display: block;
        margin-bottom: 0.25rem;
    }

    .notification-unsupported p[b-h3bcswjsei] {
        margin: 0;
        font-size: 0.8rem;
    }

.notification-denied[b-h3bcswjsei] {
    background: #FEE2E2;
    color: #991B1B;
}

    .notification-denied .rzi[b-h3bcswjsei] {
        color: #DC2626;
        font-size: 20px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .notification-denied strong[b-h3bcswjsei] {
        display: block;
        margin-bottom: 0.25rem;
    }

    .notification-denied p[b-h3bcswjsei] {
        margin: 0;
        font-size: 0.8rem;
        color: #7F1D1D;
    }

/* Preferences */
.notification-preferences[b-h3bcswjsei] {
    border-top: 1px solid #E2E8F0;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

    .notification-preferences h6[b-h3bcswjsei] {
        margin: 0 0 0.75rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: #64748B;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.pref-item[b-h3bcswjsei] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1E293B;
}

    .pref-item > div[b-h3bcswjsei] {
        display: flex;
        flex-direction: column;
    }

    .pref-item:hover[b-h3bcswjsei] {
        color: #32677E;
    }

.pref-hint[b-h3bcswjsei] {
    font-size: 0.75rem;
    color: #94A3B8;
    font-weight: 400;
    margin-top: 1px;
}

.save-prefs-btn[b-h3bcswjsei] {
    margin-top: 1rem;
}

/* Status Messages */
.notification-status[b-h3bcswjsei] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

    .notification-status.success[b-h3bcswjsei] {
        background: #D1FAE5;
        color: #065F46;
    }

    .notification-status.error[b-h3bcswjsei] {
        background: #FEE2E2;
        color: #991B1B;
    }

    .notification-status.info[b-h3bcswjsei] {
        background: #E0F2FE;
        color: #075985;
    }

/* Responsive */
@media (max-width: 480px) {
    .notification-header[b-h3bcswjsei] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .support-row[b-h3bcswjsei] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .browser-hint[b-h3bcswjsei],
    .install-hint[b-h3bcswjsei] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Shared/PwaInstallPrompt.razor.rz.scp.css */
/* ============================================
   PWA INSTALL PROMPT STYLES
   ============================================ */

/* ===== FULL BANNER (Default) ===== */
.pwa-install-prompt[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #32677E 0%, #1E293B 100%);
    border-radius: 14px;
    color: white;
    box-shadow: 0 4px 12px rgba(50, 103, 126, 0.3);
}

.pwa-install-content[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.pwa-install-icon[b-z5e88bulon] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pwa-install-icon .rzi[b-z5e88bulon] {
        font-size: 24px;
        color: white;
    }

.pwa-install-text[b-z5e88bulon] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

    .pwa-install-text strong[b-z5e88bulon] {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .pwa-install-text span[b-z5e88bulon] {
        font-size: 0.8rem;
        opacity: 0.85;
    }

.pwa-install-button[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    color: #32677E;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .pwa-install-button:hover:not(:disabled)[b-z5e88bulon] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .pwa-install-button:disabled[b-z5e88bulon] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .pwa-install-button .rzi[b-z5e88bulon] {
        font-size: 18px;
    }

.pwa-dismiss-button[b-z5e88bulon] {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

    .pwa-dismiss-button:hover[b-z5e88bulon] {
        background: rgba(255, 255, 255, 0.2);
    }

    .pwa-dismiss-button .rzi[b-z5e88bulon] {
        font-size: 18px;
    }

/* ===== SIDEBAR BANNER ===== */
.pwa-sidebar-banner[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(112, 175, 251, 0.15) 0%, rgba(50, 103, 126, 0.1) 100%);
    border: 1px solid rgba(112, 175, 251, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pwa-sidebar-banner:hover[b-z5e88bulon] {
        background: linear-gradient(135deg, rgba(112, 175, 251, 0.25) 0%, rgba(50, 103, 126, 0.2) 100%);
        border-color: rgba(112, 175, 251, 0.5);
        transform: translateX(2px);
    }

.pwa-banner-icon[b-z5e88bulon] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pwa-banner-icon .rzi[b-z5e88bulon] {
        font-size: 18px;
        color: white;
    }

.pwa-banner-text[b-z5e88bulon] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pwa-banner-title[b-z5e88bulon] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.2;
}

.pwa-banner-subtitle[b-z5e88bulon] {
    font-size: 0.7rem;
    color: #64748B;
    line-height: 1.2;
}

.pwa-banner-arrow[b-z5e88bulon] {
    color: #70AFFB;
    font-size: 18px;
    flex-shrink: 0;
}

/* ===== MENU BUTTON (Mobile) ===== */
.pwa-menu-item[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(112, 175, 251, 0.1) 0%, rgba(50, 103, 126, 0.05) 100%);
    border: 1px solid rgba(112, 175, 251, 0.2);
    border-radius: 12px;
    margin: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pwa-menu-item:hover[b-z5e88bulon],
    .pwa-menu-item:active[b-z5e88bulon] {
        background: linear-gradient(135deg, rgba(112, 175, 251, 0.2) 0%, rgba(50, 103, 126, 0.1) 100%);
        border-color: rgba(112, 175, 251, 0.4);
    }

    .pwa-menu-item .rzi:first-child[b-z5e88bulon] {
        font-size: 22px;
        color: #32677E;
        width: 28px;
        text-align: center;
    }

    .pwa-menu-item span[b-z5e88bulon] {
        flex: 1;
        font-size: 0.95rem;
        font-weight: 500;
        color: #1E293B;
    }

    .pwa-menu-item .arrow[b-z5e88bulon] {
        color: #70AFFB;
        font-size: 20px;
    }

/* ===== COMPACT BUTTON ===== */
.pwa-compact-button[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .pwa-compact-button:hover:not(:disabled)[b-z5e88bulon] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(112, 175, 251, 0.4);
    }

    .pwa-compact-button:disabled[b-z5e88bulon] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .pwa-compact-button .rzi[b-z5e88bulon] {
        font-size: 16px;
    }

/* ===== iOS INSTRUCTIONS ===== */
.pwa-ios-instructions[b-z5e88bulon] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #70AFFB 0%, #4A90D9 100%);
    border-radius: 14px;
    color: white;
    box-shadow: 0 4px 12px rgba(112, 175, 251, 0.3);
}

    .pwa-ios-instructions.sidebar[b-z5e88bulon] {
        margin: 0.5rem 0.75rem;
        padding: 0.75rem;
        border-radius: 12px;
    }

    .pwa-ios-instructions .pwa-install-icon[b-z5e88bulon] {
        background: rgba(255, 255, 255, 0.2);
    }

    .pwa-ios-instructions .pwa-install-text[b-z5e88bulon] {
        flex: 1;
    }

/* Compact mode in header */
.pwa-install-prompt.compact .pwa-install-button[b-z5e88bulon] {
    background: linear-gradient(135deg, #70AFFB 0%, #32677E 100%);
    color: white;
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
}

    .pwa-install-prompt.compact .pwa-install-button:hover:not(:disabled)[b-z5e88bulon] {
        box-shadow: 0 4px 12px rgba(112, 175, 251, 0.4);
    }

/* Responsive */
@media (max-width: 480px) {
    .pwa-install-prompt[b-z5e88bulon] {
        flex-wrap: wrap;
    }

    .pwa-install-content[b-z5e88bulon] {
        flex: 1 1 100%;
    }

    .pwa-install-button[b-z5e88bulon] {
        flex: 1;
    }

    .pwa-dismiss-button[b-z5e88bulon] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
}
/* /Components/Shared/SplashScreen.razor.rz.scp.css */
.splash-screen[b-tap47mq84a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1a202c;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    gap: 0;
}

/* Animated accent bar at the very top */
.splash-bar[b-tap47mq84a] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #70AFFB, #32677E, #70AFFB);
    background-size: 200% 100%;
    animation: splash-pulse-b-tap47mq84a 1.5s ease-in-out infinite;
}

/* Centred logo + spinner group */
.splash-content[b-tap47mq84a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.splash-logo[b-tap47mq84a] {
    width: 220px;
    height: auto;
    animation: splash-fade-in-b-tap47mq84a 0.6s ease-out both;
    /* Invert to white on the dark background */
    filter: brightness(0) invert(1);
}

.splash-spinner[b-tap47mq84a] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(112, 175, 251, 0.25);
    border-top-color: #70AFFB;
    border-radius: 50%;
    animation: splash-spin-b-tap47mq84a 0.8s linear infinite;
}

.splash-tagline[b-tap47mq84a] {
    position: fixed;
    bottom: 32px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: splash-fade-in-b-tap47mq84a 0.8s 0.3s ease-out both;
}

/* Animations */
@keyframes splash-pulse-b-tap47mq84a {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes splash-spin-b-tap47mq84a {
    to { transform: rotate(360deg); }
}

@keyframes splash-fade-in-b-tap47mq84a {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}