/* ============================================================================
   FITNESSPRO DESIGN SYSTEM
   Unified CSS for consistent styling across the entire application
   Inspired by Bodyopia.com clean, modern fitness design
   ============================================================================ */

/* ============================================================================
   1. CSS VARIABLES - Design Tokens
   ============================================================================ */

:root {
    /* ========== Primary Colors ========== */
    --fp-primary-navy: #06283D;
    --fp-primary-royal: #1363DF;
    --fp-primary-sky: #47B5FF;
    --fp-primary-light: #DFF6FF;
    
    /* ========== Accent Colors ========== */
    --fp-accent-success: #10B981;
    --fp-accent-success-light: #D1FAE5;
    --fp-accent-info: #06B6D4;
    --fp-accent-info-light: #CFFAFE;
    --fp-accent-warning: #F59E0B;
    --fp-accent-warning-light: #FEF3C7;
    --fp-accent-danger: #EF4444;
    --fp-accent-danger-light: #FEE2E2;
    --fp-accent-purple: #8B5CF6;
    --fp-accent-purple-light: #EDE9FE;
    --fp-accent-orange: #F97316;
    --fp-accent-orange-light: #FFEDD5;
    
    /* ========== Neutral Colors ========== */
    --fp-gray-50: #F9FAFB;
    --fp-gray-100: #F3F4F6;
    --fp-gray-200: #E5E7EB;
    --fp-gray-300: #D1D5DB;
    --fp-gray-400: #9CA3AF;
    --fp-gray-500: #6B7280;
    --fp-gray-600: #4B5563;
    --fp-gray-700: #374151;
    --fp-gray-800: #1F2937;
    --fp-gray-900: #111827;
    
    /* ========== Semantic Colors ========== */
    --fp-text-primary: #111827;
    --fp-text-secondary: #6B7280;
    --fp-text-muted: #9CA3AF;
    --fp-text-inverse: #FFFFFF;
    --fp-bg-primary: #FFFFFF;
    --fp-bg-secondary: #F9FAFB;
    --fp-bg-tertiary: #F3F4F6;
    --fp-border-color: #E5E7EB;
    --fp-border-focus: var(--fp-primary-sky);
    
    /* ========== Typography ========== */
    --fp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fp-font-display: 'Barlow', var(--fp-font-sans);
    --fp-font-mono: 'SF Mono', 'Roboto Mono', monospace;
    
    /* Font Sizes */
    --fp-text-xs: 0.75rem;      /* 12px */
    --fp-text-sm: 0.875rem;     /* 14px */
    --fp-text-base: 1rem;       /* 16px */
    --fp-text-lg: 1.125rem;     /* 18px */
    --fp-text-xl: 1.25rem;      /* 20px */
    --fp-text-2xl: 1.5rem;      /* 24px */
    --fp-text-3xl: 1.875rem;    /* 30px */
    --fp-text-4xl: 2.25rem;     /* 36px */
    --fp-text-5xl: 3rem;        /* 48px */
    
    /* Line Heights */
    --fp-leading-none: 1;
    --fp-leading-tight: 1.25;
    --fp-leading-snug: 1.375;
    --fp-leading-normal: 1.5;
    --fp-leading-relaxed: 1.625;
    
    /* Font Weights */
    --fp-font-normal: 400;
    --fp-font-medium: 500;
    --fp-font-semibold: 600;
    --fp-font-bold: 700;
    --fp-font-extrabold: 800;
    
    /* ========== Spacing ========== */
    --fp-space-0: 0;
    --fp-space-1: 0.25rem;   /* 4px */
    --fp-space-2: 0.5rem;    /* 8px */
    --fp-space-3: 0.75rem;   /* 12px */
    --fp-space-4: 1rem;      /* 16px */
    --fp-space-5: 1.25rem;   /* 20px */
    --fp-space-6: 1.5rem;    /* 24px */
    --fp-space-8: 2rem;      /* 32px */
    --fp-space-10: 2.5rem;   /* 40px */
    --fp-space-12: 3rem;     /* 48px */
    --fp-space-16: 4rem;     /* 64px */
    --fp-space-20: 5rem;     /* 80px */
    --fp-space-24: 6rem;     /* 96px */
    
    /* ========== Border Radius ========== */
    --fp-radius-none: 0;
    --fp-radius-sm: 0.25rem;    /* 4px */
    --fp-radius-md: 0.5rem;     /* 8px */
    --fp-radius-lg: 0.75rem;    /* 12px */
    --fp-radius-xl: 1rem;       /* 16px */
    --fp-radius-2xl: 1.5rem;    /* 24px */
    --fp-radius-full: 9999px;
    
    /* ========== Shadows ========== */
    --fp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --fp-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --fp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --fp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --fp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --fp-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --fp-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --fp-shadow-colored: 0 4px 14px 0 rgba(71, 181, 255, 0.25);
    
    /* ========== Transitions ========== */
    --fp-transition-fast: 150ms ease;
    --fp-transition-base: 200ms ease;
    --fp-transition-slow: 300ms ease;
    --fp-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========== Z-Index ========== */
    --fp-z-dropdown: 1000;
    --fp-z-sticky: 1020;
    --fp-z-fixed: 1030;
    --fp-z-modal-backdrop: 1040;
    --fp-z-modal: 1050;
    --fp-z-popover: 1060;
    --fp-z-tooltip: 1070;
}


/* ============================================================================
   2. CSS RESET & BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}

body.fp-body {
    font-family: var(--fp-font-sans);
    font-size: var(--fp-text-base);
    font-weight: var(--fp-font-normal);
    line-height: var(--fp-leading-normal);
    color: var(--fp-text-primary);
    background-color: var(--fp-bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

.fp-heading-1,
.fp-h1 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-5xl);
    font-weight: var(--fp-font-bold);
    line-height: var(--fp-leading-tight);
    color: var(--fp-text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--fp-space-4);
}

.fp-heading-2,
.fp-h2 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-4xl);
    font-weight: var(--fp-font-bold);
    line-height: var(--fp-leading-tight);
    color: var(--fp-text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--fp-space-4);
}

.fp-heading-3,
.fp-h3 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-3xl);
    font-weight: var(--fp-font-semibold);
    line-height: var(--fp-leading-snug);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-3);
}

.fp-heading-4,
.fp-h4 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-2xl);
    font-weight: var(--fp-font-semibold);
    line-height: var(--fp-leading-snug);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-3);
}

.fp-heading-5,
.fp-h5 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-xl);
    font-weight: var(--fp-font-semibold);
    line-height: var(--fp-leading-snug);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-heading-6,
.fp-h6 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-lg);
    font-weight: var(--fp-font-medium);
    line-height: var(--fp-leading-normal);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-text-body {
    font-size: var(--fp-text-base);
    line-height: var(--fp-leading-relaxed);
    color: var(--fp-text-secondary);
}

.fp-text-small {
    font-size: var(--fp-text-sm);
    line-height: var(--fp-leading-normal);
    color: var(--fp-text-muted);
}

.fp-text-tiny {
    font-size: var(--fp-text-xs);
    line-height: var(--fp-leading-normal);
    color: var(--fp-text-muted);
}

.fp-text-lead {
    font-size: var(--fp-text-xl);
    line-height: var(--fp-leading-relaxed);
    color: var(--fp-text-secondary);
}


/* ============================================================================
   4. BUTTONS
   ============================================================================ */

.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-3) var(--fp-space-6);
    font-family: var(--fp-font-sans);
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-semibold);
    line-height: var(--fp-leading-none);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--fp-radius-lg);
    cursor: pointer;
    transition: all var(--fp-transition-base);
    white-space: nowrap;
}

.fp-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(71, 181, 255, 0.3);
}

.fp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button */
.fp-btn-primary {
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
}

.fp-btn-primary:hover {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    transform: translateY(-2px);
    box-shadow: var(--fp-shadow-colored);
}

/* Secondary Button */
.fp-btn-secondary {
    background: var(--fp-bg-primary);
    color: var(--fp-primary-royal);
    border-color: var(--fp-primary-sky);
}

.fp-btn-secondary:hover {
    background: var(--fp-primary-light);
    border-color: var(--fp-primary-royal);
}

/* Success Button */
.fp-btn-success {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%);
    color: var(--fp-text-inverse);
}

.fp-btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

/* Danger Button */
.fp-btn-danger {
    background: linear-gradient(135deg, var(--fp-accent-danger) 0%, #DC2626 100%);
    color: var(--fp-text-inverse);
}

.fp-btn-danger:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

/* Ghost Button */
.fp-btn-ghost {
    background: transparent;
    color: var(--fp-text-secondary);
}

.fp-btn-ghost:hover {
    background: var(--fp-gray-100);
    color: var(--fp-text-primary);
}

/* Button Sizes */
.fp-btn-sm {
    padding: var(--fp-space-2) var(--fp-space-4);
    font-size: var(--fp-text-xs);
}

.fp-btn-lg {
    padding: var(--fp-space-4) var(--fp-space-8);
    font-size: var(--fp-text-base);
}

.fp-btn-xl {
    padding: var(--fp-space-5) var(--fp-space-10);
    font-size: var(--fp-text-lg);
    border-radius: var(--fp-radius-xl);
}

/* Icon Button */
.fp-btn-icon {
    padding: var(--fp-space-3);
    border-radius: var(--fp-radius-lg);
}

.fp-btn-icon-sm {
    padding: var(--fp-space-2);
}

/* Calculate Button */
.fp-calculate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    row-gap: 8px;
    background-image: linear-gradient(135deg, rgb(71, 181, 255) 0%, rgb(19, 99, 223) 100%);
    background-color: rgba(0, 0, 0, 0);
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: auto;
    border: 1.77778px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    border-image: none;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    height: 51.5556px;
    width: 366.222px;
    margin: 0 auto;
    padding: 16px 32px;
    text-align: start;
    text-decoration: none;
    text-wrap-mode: nowrap;
    white-space-collapse: collapse;
    transition: all 0.2s ease;
    transition-behavior: normal;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fp-calculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(19, 99, 223, 0.3);
}

.fp-calculate-btn:active {
    transform: translateY(0);
}

.fp-calculate-btn.fp-btn-auto-width {
    width: auto;
    min-width: 200px;
}

.fp-calculate-btn.rounded-pill {
    border-radius: 50rem !important;
}

/* Calculator Results Styling */
.fp-calc-stat-card {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(19, 99, 223, 0.2);
}

.fp-calc-stat-value {
    color: rgb(255, 255, 255);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
}

.fp-calc-stat-label {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fp-calc-stat-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

.fp-calc-section-title {
    color: var(--fp-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.fp-calc-macro-card {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(19, 99, 223, 0.1) 0%, rgba(6, 40, 61, 0.1) 100%);
    border: 2px solid var(--fp-primary-royal);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.fp-calc-macro-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(19, 99, 223, 0.2);
}

.fp-calc-macro-value {
    color: var(--fp-primary-royal);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.fp-calc-macro-label {
    color: var(--fp-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fp-calc-macro-kcal {
    color: var(--fp-text-muted);
    font-size: 12px;
    margin-top: 4px;
}

.fp-calc-progress-bar {
    display: flex;
    height: 24px;
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--fp-bg-secondary);
}

.fp-calc-progress-segment {
    transition: width 0.5s ease;
}

.fp-calc-protein {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.fp-calc-carbs {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.fp-calc-fat {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.fp-calc-macro-legend {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--fp-text-secondary);
}

.fp-calc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    margin-right: 4px;
}

.fp-calc-badge-protein {
    background: #22c55e;
}

.fp-calc-badge-carbs {
    background: #f59e0b;
}

.fp-calc-badge-fat {
    background: #06b6d4;
}

.fp-calc-recommendations {
    font-size: 14px;
    color: var(--fp-text-secondary);
    line-height: 1.8;
}

.fp-calc-recommendations ul {
    list-style: none;
    padding-left: 0;
}

.fp-calc-recommendations li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.fp-calc-recommendations li:before {
    content: "•";
    color: var(--fp-primary-royal);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* ============================================================================
   Goals Dashboard - Royal Blue Theme
   ============================================================================ */

/* Goals Hero Section */
.fp-goals-hero {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 8px 24px rgba(19, 99, 223, 0.25);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.fp-goals-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.fp-goals-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.fp-goals-hero-text {
    flex: 1;
}

.fp-goals-hero-title {
    color: white;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.fp-goals-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.6;
}

.fp-goals-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.fp-goals-hero-actions .btn {
    padding: 12px 32px;
    font-weight: 600;
    border-width: 2px;
    transition: all 0.3s ease;
}

.fp-goals-hero-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-2px);
}

.fp-goals-hero-actions .btn-light {
    background: white;
    color: var(--fp-primary-royal);
    border: none;
}

.fp-goals-hero-actions .btn-light:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fp-goals-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}

.fp-goals-hero-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.fp-goals-hero-stat:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.fp-goals-hero-stat-icon {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.9);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.fp-goals-hero-stat-content {
    flex: 1;
}

.fp-goals-hero-stat-value {
    color: white;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.fp-goals-hero-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive Hero */
@media (max-width: 992px) {
    .fp-goals-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .fp-goals-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .fp-goals-hero {
        padding: 32px 24px;
    }
    
    .fp-goals-hero-title {
        font-size: 32px;
    }
    
    .fp-goals-hero-subtitle {
        font-size: 16px;
    }
    
    .fp-goals-hero-stats {
        grid-template-columns: 1fr;
    }
    
    .fp-goals-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .fp-goals-hero-actions .btn {
        width: 100%;
    }
}

.fp-goal-stat-card {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(19, 99, 223, 0.2);
    transition: all 0.3s ease;
}

.fp-goal-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(19, 99, 223, 0.3);
}

.fp-goal-stat-card .card-body {
    color: white;
}

.fp-goal-stat-card .card-title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.fp-goal-stat-card .card-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fp-goal-stat-card i {
    color: rgba(255, 255, 255, 0.8);
}

.fp-quick-action-btn {
    display: block;
    width: 100%;
    padding: 24px 16px;
    background: linear-gradient(135deg, rgba(19, 99, 223, 0.05) 0%, rgba(6, 40, 61, 0.05) 100%);
    border: 2px solid var(--fp-primary-royal);
    border-radius: 12px;
    color: var(--fp-primary-royal);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.fp-quick-action-btn:hover {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(19, 99, 223, 0.3);
    text-decoration: none;
}

.fp-quick-action-btn i {
    display: block;
    margin-bottom: 8px;
}

/* Warning Button */
.fp-btn-warning {
    background: linear-gradient(135deg, var(--fp-accent-warning) 0%, #D97706 100%);
    color: var(--fp-primary-navy);
}

.fp-btn-warning:hover {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

/* Light Button */
.fp-btn-light {
    background: var(--fp-text-inverse);
    color: var(--fp-primary-navy);
    border-color: var(--fp-border-color);
}

.fp-btn-light:hover {
    background: var(--fp-primary-light);
    border-color: var(--fp-primary-sky);
    transform: translateY(-2px);
}

/* Outline Buttons */
.fp-btn-outline {
    background: transparent;
    border: 2px solid var(--fp-primary-royal);
    color: var(--fp-primary-royal);
}

.fp-btn-outline:hover {
    background: var(--fp-primary-royal);
    color: var(--fp-text-inverse);
    transform: translateY(-2px);
}

.fp-btn-outline.fp-btn-success {
    background: transparent;
    border-color: var(--fp-accent-success);
    color: var(--fp-accent-success);
}

.fp-btn-outline.fp-btn-success:hover {
    background: var(--fp-accent-success);
    color: var(--fp-text-inverse);
}

.fp-btn-outline.fp-btn-warning {
    background: transparent;
    border-color: var(--fp-accent-warning);
    color: #B45309;
}

.fp-btn-outline.fp-btn-warning:hover {
    background: var(--fp-accent-warning);
    color: var(--fp-primary-navy);
}

.fp-btn-outline.fp-btn-danger {
    background: transparent;
    border-color: var(--fp-accent-danger);
    color: var(--fp-accent-danger);
}

.fp-btn-outline.fp-btn-danger:hover {
    background: var(--fp-accent-danger);
    color: var(--fp-text-inverse);
}


/* ============================================================================
   5. CARDS - Core Component (Bodyopia-inspired)
   ============================================================================ */

.fp-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-sm);
    border: 1px solid var(--fp-border-color);
    overflow: hidden;
    transition: all var(--fp-transition-base);
}

.fp-card:hover {
    box-shadow: var(--fp-shadow-md);
    transform: translateY(-2px);
}

.fp-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    height: 96px;
    border-bottom: 1px solid var(--fp-border-color);
    background: var(--fp-bg-secondary);
    column-gap: 16px;
    row-gap: 16px;
}

.fp-card-header-gradient {
    background: linear-gradient(135deg, var(--fp-primary-navy) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
    border-bottom: none;
}

.fp-card-header-purple {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: rgb(255, 255, 255);
    border-bottom: none;
}

.fp-card-header-orange {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: rgb(255, 255, 255);
    border-bottom: none;
}

.fp-card-header-cyan {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: rgb(255, 255, 255);
    border-bottom: none;
}

.fp-card-header-gold {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: rgb(255, 255, 255);
    border-bottom: none;
}

.fp-card-header-royal-blue {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: rgb(255, 255, 255);
    border-bottom: none;
}

.fp-card-header-icon {
    font-size: 1.5rem;
    margin-right: 12px;
}

.fp-card-body {
    padding: var(--fp-space-6);
}

.fp-card-footer {
    padding: var(--fp-space-4) var(--fp-space-6);
    border-top: 1px solid var(--fp-border-color);
    background: var(--fp-bg-secondary);
}

.fp-card-title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-xl);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin: 0;
}

.fp-card-header-gradient .fp-card-title,
.fp-card-header-purple .fp-card-title,
.fp-card-header-orange .fp-card-title,
.fp-card-header-cyan .fp-card-title,
.fp-card-header-gold .fp-card-title,
.fp-card-header-royal-blue .fp-card-title {
    color: rgb(255, 255, 255);
}

.fp-card-header-gradient .fp-card-title i,
.fp-card-header-purple .fp-card-title i,
.fp-card-header-orange .fp-card-title i,
.fp-card-header-cyan .fp-card-title i,
.fp-card-header-gold .fp-card-title i,
.fp-card-header-royal-blue .fp-card-title i {
    color: white;
}

.fp-card-header-gradient .fp-btn,
.fp-card-header-purple .fp-btn,
.fp-card-header-orange .fp-btn,
.fp-card-header-cyan .fp-btn,
.fp-card-header-gold .fp-btn,
.fp-card-header-royal-blue .fp-btn {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.fp-card-header-gradient .fp-btn:hover,
.fp-card-header-purple .fp-btn:hover,
.fp-card-header-orange .fp-btn:hover,
.fp-card-header-cyan .fp-btn:hover,
.fp-card-header-gold .fp-btn:hover,
.fp-card-header-royal-blue .fp-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    transform: translateY(-2px);
}

.fp-card-subtitle {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: var(--fp-space-1);
}

/* Empty State Styling */
.fp-empty-state {
    text-align: center;
    padding: var(--fp-space-10) var(--fp-space-6);
}

.fp-empty-state i {
    color: var(--fp-text-muted);
    margin-bottom: var(--fp-space-4);
    opacity: 0.5;
}

.fp-empty-state h5 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-xl);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-empty-state .fp-text-muted {
    margin-bottom: var(--fp-space-6);
}


/* ============================================================================
   6. WORKOUT CARDS - Bodyopia Style
   ============================================================================ */

.fp-workout-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-2xl);
    box-shadow: var(--fp-shadow-md);
    overflow: visible;
    transition: all var(--fp-transition-slow);
    border: 1px solid transparent;
}

.fp-workout-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fp-shadow-xl);
    border-color: var(--fp-primary-sky);
}

.fp-workout-header {
    background: linear-gradient(135deg, var(--fp-primary-navy) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
    padding: var(--fp-space-6);
    position: relative;
}

.fp-workout-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(71, 181, 255, 0.2) 100%);
}

.fp-workout-day {
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom: var(--fp-space-1);
}

.fp-workout-title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-3xl);
    font-weight: var(--fp-font-bold);
    margin: 0;
    line-height: var(--fp-leading-tight);
}

.fp-workout-subtitle {
    font-size: var(--fp-text-sm);
    opacity: 0.85;
    margin-top: var(--fp-space-2);
}

/* Workout Stats Bar */
.fp-workout-stats {
    display: flex;
    gap: var(--fp-space-4);
    padding: var(--fp-space-4) var(--fp-space-6);
    background: var(--fp-bg-secondary);
    border-bottom: 1px solid var(--fp-border-color);
}

.fp-workout-stat {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
}

.fp-workout-stat i {
    color: var(--fp-primary-sky);
}

.fp-workout-stat-value {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
}

/* Workout Body */
.fp-workout-body {
    padding: var(--fp-space-6);
}

.fp-workout-section-title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-lg);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-workout-section-title i {
    color: var(--fp-primary-sky);
}


/* ============================================================================
   7. EXERCISE CARDS - Bodyopia Style
   ============================================================================ */

.fp-exercise-card {
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
    padding: var(--fp-space-4);
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-lg);
    border: 1px solid var(--fp-border-color);
    transition: all var(--fp-transition-base);
}

.fp-exercise-card:hover {
    border-color: var(--fp-primary-sky);
    box-shadow: var(--fp-shadow-sm);
}

.fp-exercise-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-bold);
    border-radius: var(--fp-radius-full);
    flex-shrink: 0;
}

.fp-exercise-info {
    flex: 1;
    min-width: 0;
}

.fp-exercise-name {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-1);
}

.fp-exercise-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-3);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}

.fp-exercise-detail {
    display: flex;
    align-items: center;
    gap: var(--fp-space-1);
}

.fp-exercise-detail i {
    color: var(--fp-primary-sky);
    font-size: var(--fp-text-xs);
}


/* ============================================================================
   8. WEEK SCHEDULE - Bodyopia Style
   ============================================================================ */

.fp-week-schedule {
    display: grid;
    gap: var(--fp-space-3);
}

.fp-day-card {
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
    padding: var(--fp-space-4) var(--fp-space-5);
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-lg);
    border: 2px solid var(--fp-border-color);
    text-decoration: none;
    color: inherit;
    transition: all var(--fp-transition-base);
}

.fp-day-card:hover {
    border-color: var(--fp-primary-sky);
    box-shadow: var(--fp-shadow-md);
    transform: translateX(4px);
}

.fp-day-card.fp-day-today {
    border-color: var(--fp-primary-sky);
    background: linear-gradient(135deg, rgba(71, 181, 255, 0.05) 0%, rgba(19, 99, 223, 0.05) 100%);
}

.fp-day-card.fp-day-completed {
    border-color: var(--fp-accent-success);
    background: var(--fp-accent-success-light);
}

.fp-day-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--fp-bg-secondary);
    border-radius: var(--fp-radius-lg);
    font-size: var(--fp-text-xl);
}

.fp-day-today .fp-day-icon {
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
}

.fp-day-info {
    flex: 1;
}

.fp-day-name {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-1);
}

.fp-day-workout {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
}

.fp-day-duration {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    white-space: nowrap;
}

.fp-day-badge {
    padding: var(--fp-space-1) var(--fp-space-3);
    background: var(--fp-primary-sky);
    color: var(--fp-text-inverse);
    font-size: var(--fp-text-xs);
    font-weight: var(--fp-font-semibold);
    border-radius: var(--fp-radius-full);
}


/* ============================================================================
   9. BADGES & TAGS
   ============================================================================ */

.fp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    padding: var(--fp-space-1) var(--fp-space-3);
    font-size: var(--fp-text-xs);
    font-weight: var(--fp-font-semibold);
    border-radius: var(--fp-radius-full);
    white-space: nowrap;
}

.fp-badge-primary {
    background: var(--fp-primary-light);
    color: var(--fp-primary-royal);
}

.fp-badge-success {
    background: var(--fp-accent-success-light);
    color: #047857;
}

.fp-badge-warning {
    background: var(--fp-accent-warning-light);
    color: #B45309;
}

.fp-badge-danger {
    background: var(--fp-accent-danger-light);
    color: #B91C1C;
}

.fp-badge-purple {
    background: var(--fp-accent-purple-light);
    color: #7C3AED;
}

.fp-badge-orange {
    background: var(--fp-accent-orange-light);
    color: #C2410C;
}

.fp-badge-dark {
    background: var(--fp-gray-800);
    color: var(--fp-text-inverse);
}

.fp-badge-secondary {
    background: var(--fp-gray-500);
    color: var(--fp-text-inverse);
}

.fp-badge-info {
    background: var(--fp-primary-sky);
    color: var(--fp-text-inverse);
}

/* Solid color badges for prominent display */
.fp-badge-success.fs-5,
.fp-badge-success.badge-solid {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
}

.fp-badge-warning.fs-5,
.fp-badge-warning.badge-solid {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
}

.fp-badge-danger.fs-5,
.fp-badge-danger.badge-solid {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
}

.fp-badge-secondary.fs-5,
.fp-badge-secondary.badge-solid {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
}

.fp-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

/* Larger Tag Style */
.fp-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-2) var(--fp-space-4);
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-bg-secondary);
    color: var(--fp-text-secondary);
    border: 1px solid var(--fp-border-color);
}


/* ============================================================================
   10. STAT CARDS / METRIC CARDS
   ============================================================================ */

.fp-stat-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-6);
    box-shadow: var(--fp-shadow-sm);
    border: 1px solid var(--fp-border-color);
    transition: all var(--fp-transition-base);
}

.fp-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fp-shadow-md);
}

.fp-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
    font-size: var(--fp-text-2xl);
    border-radius: var(--fp-radius-xl);
    margin-bottom: var(--fp-space-4);
}

.fp-stat-value {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-4xl);
    font-weight: var(--fp-font-bold);
    color: var(--fp-text-primary);
    line-height: var(--fp-leading-none);
    margin-bottom: var(--fp-space-1);
}

.fp-stat-label {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-stat-change {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    margin-top: var(--fp-space-2);
}

.fp-stat-change.positive {
    color: var(--fp-accent-success);
}

.fp-stat-change.negative {
    color: var(--fp-accent-danger);
}

/* Horizontal Stat Card */
.fp-stat-card-horizontal {
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
}

.fp-stat-card-horizontal .fp-stat-icon {
    margin-bottom: 0;
}


/* ============================================================================
   11. FORMS
   ============================================================================ */

.fp-form-group {
    margin-bottom: var(--fp-space-5);
}

.fp-label {
    display: block;
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-input,
.fp-select,
.fp-textarea {
    width: 100%;
    padding: var(--fp-space-3) var(--fp-space-4);
    font-family: var(--fp-font-sans);
    font-size: var(--fp-text-base);
    color: var(--fp-text-primary);
    background: var(--fp-bg-primary);
    border: 2px solid var(--fp-border-color);
    border-radius: var(--fp-radius-lg);
    transition: all var(--fp-transition-fast);
}

.fp-input:focus,
.fp-select:focus,
.fp-textarea:focus {
    outline: none;
    border-color: var(--fp-primary-sky);
    box-shadow: 0 0 0 3px rgba(71, 181, 255, 0.15);
}

.fp-input::placeholder {
    color: var(--fp-text-muted);
}

.fp-input-error {
    border-color: var(--fp-accent-danger);
}

.fp-input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.fp-input-success {
    border-color: var(--fp-accent-success);
}

.fp-helper-text {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: var(--fp-space-2);
}

.fp-error-text {
    font-size: var(--fp-text-sm);
    color: var(--fp-accent-danger);
    margin-top: var(--fp-space-2);
}

/* Input with Icon */
.fp-input-wrapper {
    position: relative;
}

.fp-input-icon {
    position: absolute;
    left: var(--fp-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--fp-text-muted);
}

.fp-input-with-icon {
    padding-left: var(--fp-space-12);
}


/* ============================================================================
   12. PROGRESS BARS & INDICATORS
   ============================================================================ */

.fp-progress {
    height: 8px;
    background: var(--fp-gray-200);
    border-radius: var(--fp-radius-full);
    overflow: hidden;
}

.fp-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
    border-radius: var(--fp-radius-full);
    transition: width var(--fp-transition-slow);
}

.fp-progress-success .fp-progress-bar {
    background: linear-gradient(90deg, var(--fp-accent-success) 0%, #059669 100%);
}

.fp-progress-warning .fp-progress-bar {
    background: linear-gradient(90deg, var(--fp-accent-warning) 0%, #D97706 100%);
}

.fp-progress-danger .fp-progress-bar {
    background: linear-gradient(90deg, var(--fp-accent-danger) 0%, #DC2626 100%);
}

/* Circular Progress */
.fp-circular-progress {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fp-circular-progress svg {
    transform: rotate(-90deg);
}

.fp-circular-progress-bg {
    stroke: var(--fp-gray-200);
}

.fp-circular-progress-bar {
    stroke: var(--fp-primary-sky);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--fp-transition-slow);
}

.fp-circular-progress-value {
    position: absolute;
    font-size: var(--fp-text-lg);
    font-weight: var(--fp-font-bold);
    color: var(--fp-text-primary);
}


/* ============================================================================
   13. LISTS & ITEMS
   ============================================================================ */

.fp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-list-item {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    border-bottom: 1px solid var(--fp-border-color);
    transition: background-color var(--fp-transition-fast);
}

.fp-list-item:last-child {
    border-bottom: none;
}

.fp-list-item:hover {
    background: var(--fp-bg-secondary);
}

.fp-list-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--fp-primary-light);
    color: var(--fp-primary-royal);
    border-radius: var(--fp-radius-lg);
    flex-shrink: 0;
}

.fp-list-item-content {
    flex: 1;
    min-width: 0;
}

.fp-list-item-title {
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-primary);
}

.fp-list-item-subtitle {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}


/* ============================================================================
   14. PRO TIPS / CALLOUT BOXES
   ============================================================================ */

.fp-callout {
    padding: var(--fp-space-5);
    border-radius: var(--fp-radius-xl);
    border-left: 4px solid;
}

.fp-callout-info {
    background: var(--fp-primary-light);
    border-color: var(--fp-primary-sky);
}

.fp-callout-success {
    background: var(--fp-accent-success-light);
    border-color: var(--fp-accent-success);
}

.fp-callout-warning {
    background: var(--fp-accent-warning-light);
    border-color: var(--fp-accent-warning);
}

.fp-callout-danger {
    background: var(--fp-accent-danger-light);
    border-color: var(--fp-accent-danger);
}

.fp-callout-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-callout-body {
    color: var(--fp-text-secondary);
}

/* Pro Tips Box */
.fp-pro-tips {
    background: linear-gradient(135deg, var(--fp-primary-light) 0%, rgba(71, 181, 255, 0.1) 100%);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-6);
}

.fp-pro-tips-title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-lg);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-primary-navy);
    margin-bottom: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-pro-tips-title i {
    color: var(--fp-primary-sky);
}

.fp-pro-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-pro-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-3);
    padding: var(--fp-space-3) 0;
    color: var(--fp-text-secondary);
    font-size: var(--fp-text-sm);
}

.fp-pro-tips-list li::before {
    content: '✓';
    color: var(--fp-accent-success);
    font-weight: var(--fp-font-bold);
    flex-shrink: 0;
}


/* ============================================================================
   15. AVATARS
   ============================================================================ */

.fp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fp-radius-full);
    overflow: hidden;
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
    color: var(--fp-text-inverse);
    font-weight: var(--fp-font-semibold);
}

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

.fp-avatar-xs {
    width: 24px;
    height: 24px;
    font-size: var(--fp-text-xs);
}

.fp-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: var(--fp-text-sm);
}

.fp-avatar-md {
    width: 40px;
    height: 40px;
    font-size: var(--fp-text-base);
}

.fp-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: var(--fp-text-xl);
}

.fp-avatar-xl {
    width: 80px;
    height: 80px;
    font-size: var(--fp-text-3xl);
}

.fp-avatar-group {
    display: flex;
}

.fp-avatar-group .fp-avatar {
    border: 2px solid var(--fp-bg-primary);
    margin-left: -8px;
}

.fp-avatar-group .fp-avatar:first-child {
    margin-left: 0;
}


/* ============================================================================
   16. ALERTS & NOTIFICATIONS
   ============================================================================ */

.fp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4) var(--fp-space-5);
    border-radius: var(--fp-radius-lg);
    border: 1px solid transparent;
}

.fp-alert-icon {
    flex-shrink: 0;
    font-size: var(--fp-text-lg);
}

.fp-alert-content {
    flex: 1;
}

.fp-alert-title {
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-1);
}

.fp-alert-info {
    background: var(--fp-primary-light);
    border-color: var(--fp-primary-sky);
    color: var(--fp-primary-navy);
}

.fp-alert-success {
    background: var(--fp-accent-success-light);
    border-color: var(--fp-accent-success);
    color: #065F46;
}

.fp-alert-warning {
    background: var(--fp-accent-warning-light);
    border-color: var(--fp-accent-warning);
    color: #92400E;
}

.fp-alert-danger {
    background: var(--fp-accent-danger-light);
    border-color: var(--fp-accent-danger);
    color: #991B1B;
}


/* ============================================================================
   17. NAVIGATION COMPONENTS
   ============================================================================ */

.fp-nav {
    display: flex;
    gap: var(--fp-space-1);
}

.fp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-3) var(--fp-space-4);
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-secondary);
    text-decoration: none;
    border-radius: var(--fp-radius-lg);
    transition: all var(--fp-transition-fast);
}

.fp-nav-link:hover {
    color: var(--fp-text-primary);
    background: var(--fp-bg-secondary);
}

.fp-nav-link.active {
    color: var(--fp-primary-royal);
    background: var(--fp-primary-light);
}

/* Tabs */
.fp-tabs {
    display: flex;
    border-bottom: 2px solid var(--fp-border-color);
}

.fp-tab {
    padding: var(--fp-space-4) var(--fp-space-6);
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--fp-transition-fast);
}

.fp-tab:hover {
    color: var(--fp-text-primary);
}

.fp-tab.active {
    color: var(--fp-primary-royal);
    border-color: var(--fp-primary-sky);
}


/* ============================================================================
   18. MODALS & OVERLAYS
   ============================================================================ */

.fp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--fp-z-modal-backdrop);
    animation: fadeIn var(--fp-transition-fast);
}

.fp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-2xl);
    box-shadow: var(--fp-shadow-2xl);
    max-width: 500px;
    width: calc(100% - var(--fp-space-8));
    max-height: 90vh;
    overflow: auto;
    z-index: var(--fp-z-modal);
    animation: slideUp var(--fp-transition-base);
}

.fp-modal-header {
    padding: var(--fp-space-6);
    border-bottom: 1px solid var(--fp-border-color);
}

.fp-modal-body {
    padding: var(--fp-space-6);
}

.fp-modal-footer {
    padding: var(--fp-space-4) var(--fp-space-6);
    border-top: 1px solid var(--fp-border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--fp-space-3);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

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


/* ============================================================================
   19. TABLES
   ============================================================================ */

.fp-table-container {
    overflow-x: auto;
    border-radius: var(--fp-radius-xl);
    border: 1px solid var(--fp-border-color);
}

.fp-table {
    width: 100%;
    border-collapse: collapse;
}

.fp-table th {
    padding: var(--fp-space-4) var(--fp-space-5);
    text-align: left;
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-secondary);
    background: var(--fp-bg-secondary);
    border-bottom: 1px solid var(--fp-border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-table td {
    padding: var(--fp-space-4) var(--fp-space-5);
    border-bottom: 1px solid var(--fp-border-color);
    color: var(--fp-text-primary);
}

.fp-table tr:last-child td {
    border-bottom: none;
}

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


/* ============================================================================
   20. UTILITY CLASSES
   ============================================================================ */

/* Text Colors */
.fp-text-primary { color: var(--fp-text-primary) !important; }
.fp-text-secondary { color: var(--fp-text-secondary) !important; }
.fp-text-muted { color: var(--fp-text-muted) !important; }
.fp-text-success { color: var(--fp-accent-success) !important; }
.fp-text-danger { color: var(--fp-accent-danger) !important; }
.fp-text-warning { color: var(--fp-accent-warning) !important; }
.fp-text-sky { color: var(--fp-primary-sky) !important; }
.fp-text-royal { color: var(--fp-primary-royal) !important; }

/* Background Colors */
.fp-bg-primary { background-color: var(--fp-bg-primary) !important; }
.fp-bg-secondary { background-color: var(--fp-bg-secondary) !important; }
.fp-bg-sky { background-color: var(--fp-primary-light) !important; }

/* Spacing */
.fp-mt-0 { margin-top: 0 !important; }
.fp-mt-4 { margin-top: var(--fp-space-4) !important; }
.fp-mt-6 { margin-top: var(--fp-space-6) !important; }
.fp-mt-8 { margin-top: var(--fp-space-8) !important; }
.fp-mb-4 { margin-bottom: var(--fp-space-4) !important; }
.fp-mb-6 { margin-bottom: var(--fp-space-6) !important; }
.fp-p-4 { padding: var(--fp-space-4) !important; }
.fp-p-6 { padding: var(--fp-space-6) !important; }

/* Flexbox */
.fp-flex { display: flex !important; }
.fp-flex-col { flex-direction: column !important; }
.fp-items-center { align-items: center !important; }
.fp-justify-between { justify-content: space-between !important; }
.fp-justify-center { justify-content: center !important; }
.fp-gap-2 { gap: var(--fp-space-2) !important; }
.fp-gap-4 { gap: var(--fp-space-4) !important; }
.fp-gap-6 { gap: var(--fp-space-6) !important; }

/* Grid */
.fp-grid { display: grid !important; }
.fp-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.fp-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.fp-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* Text Alignment */
.fp-text-center { text-align: center !important; }
.fp-text-right { text-align: right !important; }

/* Visibility */
.fp-hidden { display: none !important; }
.fp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================================
   21. RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Mobile First - Base is mobile */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .fp-sm\:flex { display: flex !important; }
    .fp-sm\:hidden { display: none !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .fp-md\:flex { display: flex !important; }
    .fp-md\:hidden { display: none !important; }
    .fp-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .fp-lg\:flex { display: flex !important; }
    .fp-lg\:hidden { display: none !important; }
    .fp-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .fp-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .fp-xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Mobile-specific overrides */
@media (max-width: 767px) {
    .fp-heading-1, .fp-h1 {
        font-size: var(--fp-text-3xl);
    }
    
    .fp-heading-2, .fp-h2 {
        font-size: var(--fp-text-2xl);
    }
    
    .fp-heading-3, .fp-h3 {
        font-size: var(--fp-text-xl);
    }
    
    .fp-card-body {
        padding: var(--fp-space-4);
    }
    
    .fp-workout-header {
        padding: var(--fp-space-4);
    }
    
    .fp-workout-title {
        font-size: var(--fp-text-2xl);
    }
    
    .fp-workout-stats {
        flex-wrap: wrap;
        padding: var(--fp-space-3) var(--fp-space-4);
    }
    
    .fp-stat-card {
        padding: var(--fp-space-4);
    }
    
    .fp-stat-value {
        font-size: var(--fp-text-3xl);
    }
    
    .fp-modal {
        max-width: calc(100% - var(--fp-space-4));
    }
}


/* ============================================================================
   22. ANIMATIONS
   ============================================================================ */

.fp-animate-fade-in {
    animation: fpFadeIn var(--fp-transition-base) ease-out;
}

.fp-animate-slide-up {
    animation: fpSlideUp var(--fp-transition-base) ease-out;
}

.fp-animate-slide-down {
    animation: fpSlideDown var(--fp-transition-base) ease-out;
}

.fp-animate-scale-in {
    animation: fpScaleIn var(--fp-transition-base) ease-out;
}

.fp-animate-pulse {
    animation: fpPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.fp-animate-bounce {
    animation: fpBounce 1s infinite;
}

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

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

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

@keyframes fpScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes fpBounce {
    0%, 100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}


/* ============================================================================
   23. DARK MODE SUPPORT (Optional)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root.fp-dark-mode {
        --fp-text-primary: #F9FAFB;
        --fp-text-secondary: #D1D5DB;
        --fp-text-muted: #9CA3AF;
        --fp-bg-primary: #1F2937;
        --fp-bg-secondary: #111827;
        --fp-bg-tertiary: #374151;
        --fp-border-color: #374151;
    }
}


/* ============================================================================
   24. PRINT STYLES
   ============================================================================ */

@media print {
    .fp-no-print {
        display: none !important;
    }
    
    .fp-card {
        box-shadow: none;
        border: 1px solid #000;
    }
}


/* ============================================================================
   25. PROFILE & SETTINGS PAGES
   ============================================================================ */

/* Profile Page Layout */
.fp-profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--fp-space-6);
    padding: var(--fp-space-6) 0;
}

@media (max-width: 991px) {
    .fp-profile-layout {
        grid-template-columns: 1fr;
        gap: var(--fp-space-4);
        padding: var(--fp-space-4) 0;
    }
}

/* Profile Sidebar */
.fp-profile-sidebar {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-md);
    border: 1px solid var(--fp-border-color);
    overflow: hidden;
    position: sticky;
    top: var(--fp-space-6);
    height: fit-content;
    z-index: 10;
}

/* Mobile: Make sidebar non-sticky and collapsible */
@media (max-width: 991px) {
    .fp-profile-sidebar {
        position: relative;
        top: 0;
        order: -1; /* Ensure sidebar appears above content */
    }
    
    .fp-profile-sidebar-header {
        cursor: pointer;
        position: relative;
    }
    
    .fp-profile-sidebar-header::after {
        content: '\f078'; /* FontAwesome chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: var(--fp-space-5);
        top: 50%;
        transform: translateY(-50%);
        color: var(--fp-text-inverse);
        transition: transform var(--fp-transition-fast);
    }
    
    .fp-profile-sidebar.collapsed .fp-profile-sidebar-header::after {
        transform: translateY(-50%) rotate(-90deg);
    }
    
    .fp-profile-sidebar.collapsed .fp-profile-nav {
        display: none;
    }
}

.fp-profile-sidebar-header {
    background: linear-gradient(135deg, var(--fp-primary-navy) 0%, var(--fp-primary-royal) 100%);
    padding: var(--fp-space-5);
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-profile-sidebar-header i {
    font-size: var(--fp-text-xl);
    color: var(--fp-text-inverse);
}

.fp-profile-sidebar-header h5 {
    font-family: var(--fp-font-display);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-inverse);
    margin: 0;
    font-size: var(--fp-text-lg);
}

/* Profile Nav Menu */
.fp-profile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fp-profile-nav-item {
    border-bottom: 1px solid var(--fp-gray-100);
}

.fp-profile-nav-item:last-child {
    border-bottom: none;
}

.fp-profile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4) var(--fp-space-5);
    color: var(--fp-text-secondary);
    text-decoration: none;
    font-weight: var(--fp-font-medium);
    transition: all var(--fp-transition-fast);
}

.fp-profile-nav-link i {
    width: 20px;
    text-align: center;
    font-size: var(--fp-text-base);
    color: var(--fp-primary-royal);
}

.fp-profile-nav-link:hover {
    background: var(--fp-gray-50);
    color: var(--fp-primary-royal);
    padding-left: var(--fp-space-6);
}

.fp-profile-nav-link.active {
    background: linear-gradient(90deg, rgba(71, 181, 255, 0.15) 0%, transparent 100%);
    color: var(--fp-primary-navy);
    font-weight: var(--fp-font-semibold);
    border-left: 4px solid var(--fp-primary-royal);
}

.fp-profile-nav-link.active i {
    color: var(--fp-primary-navy);
}

/* Profile Content Area */
.fp-profile-content {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-6);
}

/* Profile Card */
.fp-profile-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-md);
    border: 1px solid var(--fp-border-color);
    overflow: hidden;
}

.fp-profile-card-header {
    padding: var(--fp-space-5) var(--fp-space-6);
    border-bottom: 1px solid var(--fp-gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--fp-bg-secondary);
}

.fp-profile-card-header h4 {
    font-family: var(--fp-font-display);
    font-weight: var(--fp-font-bold);
    color: var(--fp-primary-navy);
    margin: 0;
    font-size: var(--fp-text-xl);
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-profile-card-header h4 i {
    color: var(--fp-primary-royal);
}

.fp-profile-card-body {
    padding: var(--fp-space-6);
}

/* Profile Avatar Section */
.fp-profile-avatar-section {
    text-align: center;
    margin-bottom: var(--fp-space-6);
}

.fp-profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: var(--fp-radius-full);
    object-fit: cover;
    border: 4px solid var(--fp-primary-sky);
    box-shadow: 0 8px 25px rgba(71, 181, 255, 0.25);
    margin-bottom: var(--fp-space-4);
}

.fp-profile-avatar-placeholder {
    width: 150px;
    height: 150px;
    border-radius: var(--fp-radius-full);
    background: linear-gradient(135deg, var(--fp-gray-100) 0%, var(--fp-gray-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fp-space-4);
    border: 4px solid var(--fp-gray-200);
}

.fp-profile-avatar-placeholder i {
    font-size: 4rem;
    color: var(--fp-gray-400);
}

/* Profile Info Table */
.fp-profile-info-table {
    width: 100%;
}

.fp-profile-info-table tr {
    border-bottom: 1px solid var(--fp-gray-100);
}

.fp-profile-info-table tr:last-child {
    border-bottom: none;
}

.fp-profile-info-table td {
    padding: var(--fp-space-3) var(--fp-space-2);
    vertical-align: middle;
}

.fp-profile-info-table td:first-child {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    width: 40%;
}

.fp-profile-info-table td:last-child {
    color: var(--fp-text-secondary);
}

/* Profile Section Title */
.fp-profile-section-title {
    font-family: var(--fp-font-display);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-primary-navy);
    font-size: var(--fp-text-lg);
    margin-bottom: var(--fp-space-5);
    padding-bottom: var(--fp-space-3);
    border-bottom: 2px solid var(--fp-gray-200);
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-profile-section-title i {
    color: var(--fp-primary-royal);
}

/* Profile Form Styling */
.fp-profile-form-group {
    margin-bottom: var(--fp-space-5);
}

.fp-profile-form-label {
    display: block;
    font-weight: var(--fp-font-semibold);
    color: var(--fp-primary-navy);
    margin-bottom: var(--fp-space-2);
    font-size: var(--fp-text-sm);
}

.fp-profile-form-input {
    width: 100%;
    padding: var(--fp-space-3) var(--fp-space-4);
    font-size: var(--fp-text-base);
    color: var(--fp-text-primary);
    background: var(--fp-bg-primary);
    border: 2px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-lg);
    transition: all var(--fp-transition-fast);
}

.fp-profile-form-input:focus {
    outline: none;
    border-color: var(--fp-primary-sky);
    box-shadow: 0 0 0 4px rgba(71, 181, 255, 0.15);
}

.fp-profile-form-select {
    width: 100%;
    padding: var(--fp-space-3) var(--fp-space-4);
    font-size: var(--fp-text-base);
    color: var(--fp-text-primary);
    background: var(--fp-bg-primary);
    border: 2px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-lg);
    transition: all var(--fp-transition-fast);
    cursor: pointer;
}

.fp-profile-form-select:focus {
    outline: none;
    border-color: var(--fp-primary-sky);
    box-shadow: 0 0 0 4px rgba(71, 181, 255, 0.15);
}

.fp-profile-form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--fp-space-4);
    font-size: var(--fp-text-base);
    color: var(--fp-text-primary);
    background: var(--fp-bg-primary);
    border: 2px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-lg);
    transition: all var(--fp-transition-fast);
    resize: vertical;
}

.fp-profile-form-textarea:focus {
    outline: none;
    border-color: var(--fp-primary-sky);
    box-shadow: 0 0 0 4px rgba(71, 181, 255, 0.15);
}

.fp-profile-form-text {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: var(--fp-space-2);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-profile-form-text i {
    color: var(--fp-primary-royal);
}

/* Profile Checkbox */
.fp-profile-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-3);
    padding: var(--fp-space-3) 0;
}

.fp-profile-checkbox {
    width: 22px;
    height: 22px;
    accent-color: var(--fp-primary-royal);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.fp-profile-checkbox-content {
    flex: 1;
}

.fp-profile-checkbox-label {
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-primary);
    cursor: pointer;
}

.fp-profile-checkbox-description {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: var(--fp-space-1);
}

/* Profile Quick Actions */
.fp-profile-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 767px) {
    .fp-profile-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== PROFILE MOBILE RESPONSIVE STYLES ========== */
@media (max-width: 991px) {
    .fp-profile-card-header {
        flex-direction: column;
        gap: var(--fp-space-3);
        text-align: center;
    }
    
    .fp-profile-card-header h4 {
        font-size: var(--fp-text-lg);
    }
    
    .fp-profile-card-body {
        padding: var(--fp-space-4);
    }
    
    .fp-profile-avatar-section {
        margin-bottom: var(--fp-space-4);
    }
    
    .fp-profile-avatar,
    .fp-profile-avatar-placeholder {
        width: 120px;
        height: 120px;
    }
    
    .fp-profile-avatar-placeholder i {
        font-size: 3rem;
    }
    
    .fp-profile-info-table td:first-child {
        width: 45%;
        font-size: var(--fp-text-sm);
    }
    
    .fp-profile-info-table td:last-child {
        font-size: var(--fp-text-sm);
    }
    
    .fp-profile-section-title {
        font-size: var(--fp-text-base);
        margin-bottom: var(--fp-space-3);
    }
    
    .fp-profile-form-group {
        margin-bottom: var(--fp-space-3);
    }
    
    .fp-profile-form-actions {
        flex-direction: column;
        gap: var(--fp-space-3);
    }
    
    .fp-profile-form-actions .d-flex {
        flex-direction: column;
        gap: var(--fp-space-2);
        width: 100%;
    }
    
    .fp-profile-form-actions .fp-btn {
        width: 100%;
        justify-content: center;
    }
    
    .fp-profile-checkbox-group {
        padding: var(--fp-space-3);
    }
    
    .fp-profile-status-card {
        padding: var(--fp-space-3);
    }
    
    .fp-theme-preview-grid {
        grid-template-columns: 1fr;
        gap: var(--fp-space-3);
    }
    
    .fp-danger-zone-body {
        grid-template-columns: 1fr;
        padding: var(--fp-space-4);
        gap: var(--fp-space-4);
    }
    
    .fp-danger-zone-item {
        text-align: center;
    }
    
    .fp-danger-zone-item .fp-btn {
        width: 100%;
    }
    
    .fp-password-strength {
        margin-top: var(--fp-space-2);
    }
    
    .fp-security-list {
        padding: var(--fp-space-3);
    }
    
    .fp-security-list h6 {
        font-size: var(--fp-text-sm);
    }
    
    .fp-security-list ul li {
        font-size: var(--fp-text-xs);
    }
}

@media (max-width: 576px) {
    .fp-profile-layout {
        padding: var(--fp-space-2) 0;
    }
    
    .fp-profile-card {
        border-radius: var(--fp-radius-lg);
    }
    
    .fp-profile-sidebar {
        border-radius: var(--fp-radius-lg);
    }
    
    .fp-profile-card-header {
        padding: var(--fp-space-3) var(--fp-space-4);
    }
    
    .fp-profile-card-body {
        padding: var(--fp-space-3);
    }
    
    .fp-profile-action-btn {
        padding: var(--fp-space-3);
    }
    
    .fp-profile-action-btn i {
        font-size: var(--fp-text-xl);
    }
    
    .fp-profile-action-btn span {
        font-size: var(--fp-text-xs);
    }
    
    .fp-profile-info-table td {
        padding: var(--fp-space-2) var(--fp-space-1);
        font-size: var(--fp-text-xs);
    }
    
    .fp-input-group {
        flex-direction: column;
    }
    
    .fp-input-group .fp-profile-form-input {
        border-radius: var(--fp-radius-lg);
        border-right: 2px solid var(--fp-gray-200);
    }
    
    .fp-input-group-btn {
        border-radius: var(--fp-radius-lg);
        border: 2px solid var(--fp-gray-200);
        margin-top: var(--fp-space-2);
    }
}

.fp-profile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-5);
    background: var(--fp-bg-secondary);
    border: 2px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-lg);
    text-decoration: none;
    transition: all var(--fp-transition-base);
}

.fp-profile-action-btn:hover {
    border-color: var(--fp-primary-sky);
    transform: translateY(-3px);
    box-shadow: var(--fp-shadow-md);
}

.fp-profile-action-btn i {
    font-size: var(--fp-text-2xl);
    color: var(--fp-primary-royal);
}

.fp-profile-action-btn span {
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-secondary);
}

.fp-profile-action-btn.fp-action-primary {
    border-color: var(--fp-primary-royal);
    background: rgba(19, 99, 223, 0.08);
}

.fp-profile-action-btn.fp-action-info {
    border-color: var(--fp-primary-sky);
    background: rgba(71, 181, 255, 0.08);
}

.fp-profile-action-btn.fp-action-success {
    border-color: var(--fp-success);
    background: rgba(16, 185, 129, 0.08);
}

.fp-profile-action-btn.fp-action-warning {
    border-color: var(--fp-warning);
    background: rgba(245, 158, 11, 0.08);
}

/* Profile Status Card */
.fp-profile-status-card {
    background: var(--fp-bg-secondary);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-4);
    border-left: 4px solid var(--fp-primary-royal);
}

.fp-profile-status-card.fp-status-success {
    border-left-color: var(--fp-success);
}

.fp-profile-status-card.fp-status-warning {
    border-left-color: var(--fp-warning);
}

.fp-profile-status-card.fp-status-danger {
    border-left-color: var(--fp-danger);
}

.fp-profile-status-card h6 {
    font-family: var(--fp-font-display);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-profile-status-card p {
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
    margin: 0;
}

/* Danger Zone */
.fp-danger-zone {
    background: var(--fp-bg-primary);
    border: 2px solid var(--fp-danger);
    border-radius: var(--fp-radius-xl);
    overflow: hidden;
}

.fp-danger-zone-header {
    background: rgba(239, 68, 68, 0.1);
    padding: var(--fp-space-4) var(--fp-space-6);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.fp-danger-zone-header h5 {
    font-family: var(--fp-font-display);
    font-weight: var(--fp-font-bold);
    color: var(--fp-danger);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-danger-zone-body {
    padding: var(--fp-space-6);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-6);
}

@media (max-width: 767px) {
    .fp-danger-zone-body {
        grid-template-columns: 1fr;
    }
}

.fp-danger-zone-item h6 {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-danger-zone-item p {
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
    margin-bottom: var(--fp-space-4);
}

/* Password Strength Meter */
.fp-password-strength {
    margin-top: var(--fp-space-3);
}

.fp-password-strength-bar {
    height: 6px;
    background: var(--fp-gray-200);
    border-radius: var(--fp-radius-full);
    overflow: hidden;
}

.fp-password-strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: var(--fp-radius-full);
}

.fp-password-strength-fill.weak {
    width: 25%;
    background: var(--fp-danger);
}

.fp-password-strength-fill.fair {
    width: 50%;
    background: var(--fp-warning);
}

.fp-password-strength-fill.good {
    width: 75%;
    background: var(--fp-primary-sky);
}

.fp-password-strength-fill.strong {
    width: 100%;
    background: var(--fp-success);
}

.fp-password-strength-text {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: var(--fp-space-2);
}

/* Password Requirements List */
.fp-password-requirements {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-password-requirements li {
    padding: var(--fp-space-2) 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-password-requirements li.valid {
    color: var(--fp-success);
}

.fp-password-requirements li.valid i {
    color: var(--fp-success);
}

.fp-password-requirements li.invalid i {
    color: var(--fp-danger);
}

/* Input Group with Button */
.fp-input-group {
    display: flex;
    align-items: stretch;
}

.fp-input-group .fp-profile-form-input {
    border-radius: var(--fp-radius-lg) 0 0 var(--fp-radius-lg);
    border-right: none;
}

.fp-input-group-append {
    display: flex;
}

.fp-input-group-btn {
    padding: var(--fp-space-3) var(--fp-space-4);
    background: var(--fp-gray-100);
    border: 2px solid var(--fp-gray-200);
    border-left: none;
    border-radius: 0 var(--fp-radius-lg) var(--fp-radius-lg) 0;
    color: var(--fp-text-secondary);
    cursor: pointer;
    transition: all var(--fp-transition-fast);
}

.fp-input-group-btn:hover {
    background: var(--fp-gray-200);
    color: var(--fp-text-primary);
}

/* Theme Preview Cards */
.fp-theme-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 767px) {
    .fp-theme-preview-grid {
        grid-template-columns: 1fr;
    }
}

.fp-theme-preview-card {
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    border: 2px solid var(--fp-gray-200);
    transition: all var(--fp-transition-base);
    cursor: pointer;
}

.fp-theme-preview-card:hover,
.fp-theme-preview-card.active {
    border-color: var(--fp-primary-royal);
    box-shadow: var(--fp-shadow-md);
}

.fp-theme-preview-card.active {
    border-width: 3px;
}

.fp-theme-preview-header {
    padding: var(--fp-space-3) var(--fp-space-4);
    font-weight: var(--fp-font-semibold);
    font-size: var(--fp-text-sm);
}

.fp-theme-preview-body {
    padding: var(--fp-space-4);
    font-size: var(--fp-text-sm);
}

/* Profile Form Actions */
.fp-profile-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--fp-space-5);
    margin-top: var(--fp-space-5);
    border-top: 1px solid var(--fp-gray-200);
}

/* Password Strength Fill States */
.fp-password-strength-fill.fp-strength-weak {
    background: var(--fp-danger);
}

.fp-password-strength-fill.fp-strength-fair {
    background: var(--fp-warning);
}

.fp-password-strength-fill.fp-strength-good {
    background: var(--fp-primary-sky);
}

.fp-password-strength-fill.fp-strength-strong {
    background: var(--fp-success);
}

/* Password Requirements States */
.fp-password-requirements li.fp-req-valid {
    color: var(--fp-success);
}

.fp-password-requirements li.fp-req-valid i {
    color: var(--fp-success);
}

.fp-password-requirements li.fp-req-invalid {
    color: var(--fp-text-muted);
}

.fp-password-requirements li.fp-req-invalid i {
    color: var(--fp-danger);
}

/* Tips List */
.fp-tips-list {
    list-style: none;
    padding: 0;
    margin: var(--fp-space-3) 0 0 0;
}

.fp-tips-list li {
    padding: var(--fp-space-1) 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    position: relative;
    padding-left: var(--fp-space-4);
}

.fp-tips-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--fp-primary-sky);
}

/* Security Best Practices Lists */
.fp-security-list {
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-lg);
}

.fp-security-list h6 {
    font-family: var(--fp-font-display);
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-3);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-security-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-security-list ul li {
    padding: var(--fp-space-2) 0;
    font-size: var(--fp-text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-2);
}

.fp-security-list ul li i {
    margin-top: 3px;
}

.fp-do-list {
    background: rgba(16, 185, 129, 0.08);
    border-left: 4px solid var(--fp-success);
}

.fp-do-list h6 {
    color: var(--fp-success);
}

.fp-do-list h6 i {
    color: var(--fp-success);
}

.fp-do-list ul li {
    color: var(--fp-text-secondary);
}

.fp-do-list ul li i {
    color: var(--fp-success);
}

.fp-avoid-list {
    background: rgba(239, 68, 68, 0.08);
    border-left: 4px solid var(--fp-danger);
}

.fp-avoid-list h6 {
    color: var(--fp-danger);
}

.fp-avoid-list h6 i {
    color: var(--fp-danger);
}

.fp-avoid-list ul li {
    color: var(--fp-text-secondary);
}

.fp-avoid-list ul li i {
    color: var(--fp-danger);
}

/* Profile Checkbox Group */
.fp-profile-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    background: var(--fp-bg-secondary);
    border-radius: var(--fp-radius-lg);
    border: 1px solid var(--fp-gray-200);
}

.fp-profile-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--fp-primary-royal);
}

.fp-profile-checkbox-content {
    flex: 1;
}

.fp-profile-checkbox-label {
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-1);
}

.fp-profile-checkbox-description {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}

/* ============================================================================
   26. ONBOARDING PAGES
   ============================================================================ */

/* Onboarding Container */
.fp-onboarding-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--fp-primary-light) 0%, var(--fp-bg-primary) 50%, var(--fp-gray-50) 100%);
    padding: var(--fp-space-8) 0;
}

/* Onboarding Card */
.fp-onboarding-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-2xl);
    box-shadow: var(--fp-shadow-xl);
    border: none;
    overflow: hidden;
}

.fp-onboarding-card-body {
    padding: var(--fp-space-8);
}

@media (max-width: 767px) {
    .fp-onboarding-card-body {
        padding: var(--fp-space-5);
    }
}

/* Onboarding Progress Bar */
.fp-onboarding-progress {
    margin-bottom: var(--fp-space-6);
}

.fp-onboarding-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-2);
}

.fp-onboarding-progress-label {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    font-weight: var(--fp-font-medium);
}

.fp-onboarding-progress-step {
    font-size: var(--fp-text-sm);
    color: var(--fp-primary-royal);
    font-weight: var(--fp-font-semibold);
}

.fp-onboarding-progress-bar {
    height: 8px;
    background: var(--fp-gray-200);
    border-radius: var(--fp-radius-full);
    overflow: hidden;
}

.fp-onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fp-primary-royal) 0%, var(--fp-primary-sky) 100%);
    border-radius: var(--fp-radius-full);
    transition: width 0.4s ease;
}

.fp-onboarding-progress-fill.complete {
    background: linear-gradient(90deg, var(--fp-accent-success) 0%, #34D399 100%);
}

/* Onboarding Header */
.fp-onboarding-header {
    text-align: center;
    margin-bottom: var(--fp-space-8);
}

.fp-onboarding-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--fp-radius-full);
    background: linear-gradient(135deg, var(--fp-primary-light) 0%, rgba(19, 99, 223, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fp-space-5);
    font-size: 2rem;
    color: var(--fp-primary-royal);
}

.fp-onboarding-title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-2xl);
    font-weight: var(--fp-font-bold);
    color: var(--fp-primary-navy);
    margin-bottom: var(--fp-space-3);
}

.fp-onboarding-subtitle {
    font-size: var(--fp-text-base);
    color: var(--fp-text-secondary);
    max-width: 400px;
    margin: 0 auto;
    line-height: var(--fp-leading-relaxed);
}

/* Onboarding Feature Grid */
.fp-onboarding-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-space-4);
    margin-bottom: var(--fp-space-6);
}

@media (max-width: 767px) {
    .fp-onboarding-features {
        grid-template-columns: 1fr;
        gap: var(--fp-space-3);
    }
}

.fp-onboarding-feature {
    text-align: center;
    padding: var(--fp-space-4);
    background: var(--fp-gray-50);
    border-radius: var(--fp-radius-xl);
    transition: all 0.2s ease;
}

.fp-onboarding-feature:hover {
    background: var(--fp-primary-light);
    transform: translateY(-2px);
}

.fp-onboarding-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--fp-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fp-space-3);
    font-size: 1.25rem;
}

.fp-onboarding-feature-icon.goals {
    background: rgba(239, 68, 68, 0.1);
    color: var(--fp-accent-danger);
}

.fp-onboarding-feature-icon.progress {
    background: rgba(59, 130, 246, 0.1);
    color: var(--fp-primary-royal);
}

.fp-onboarding-feature-icon.community {
    background: rgba(16, 185, 129, 0.1);
    color: var(--fp-accent-success);
}

.fp-onboarding-feature-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    font-size: var(--fp-text-sm);
}

/* Onboarding Checklist */
.fp-onboarding-checklist {
    background: var(--fp-gray-50);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-5);
    margin-bottom: var(--fp-space-6);
}

.fp-onboarding-checklist-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-onboarding-checklist-item {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-3) 0;
    border-bottom: 1px solid var(--fp-gray-200);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
}

.fp-onboarding-checklist-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fp-onboarding-checklist-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--fp-radius-full);
    background: var(--fp-accent-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Onboarding Info Alert */
.fp-onboarding-alert {
    background: linear-gradient(135deg, var(--fp-primary-light) 0%, rgba(71, 181, 255, 0.1) 100%);
    border: 1px solid rgba(19, 99, 223, 0.2);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-4);
    margin-bottom: var(--fp-space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--fp-space-3);
}

.fp-onboarding-alert-icon {
    color: var(--fp-primary-royal);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fp-onboarding-alert-content {
    font-size: var(--fp-text-sm);
    color: var(--fp-primary-navy);
    line-height: var(--fp-leading-relaxed);
}

.fp-onboarding-alert.success {
    background: linear-gradient(135deg, var(--fp-accent-success-light) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.fp-onboarding-alert.success .fp-onboarding-alert-icon {
    color: var(--fp-accent-success);
}

.fp-onboarding-alert.success .fp-onboarding-alert-content {
    color: var(--fp-text-primary);
}

.fp-onboarding-alert.warning {
    background: linear-gradient(135deg, var(--fp-accent-warning-light) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.fp-onboarding-alert.warning .fp-onboarding-alert-icon {
    color: var(--fp-accent-warning);
}

/* Onboarding Navigation */
.fp-onboarding-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--fp-space-6);
    padding-top: var(--fp-space-6);
    border-top: 1px solid var(--fp-gray-200);
}

.fp-onboarding-nav-left {
    display: flex;
    gap: var(--fp-space-3);
}

/* Onboarding Option Cards (for goals, privacy, etc.) */
.fp-option-cards {
    display: grid;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-5);
}

.fp-option-cards.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.fp-option-cards.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .fp-option-cards.cols-2,
    .fp-option-cards.cols-3 {
        grid-template-columns: 1fr;
    }
}

.fp-option-card {
    position: relative;
    padding: var(--fp-space-5);
    background: var(--fp-bg-primary);
    border: 2px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-xl);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.fp-option-card:hover {
    border-color: var(--fp-primary-sky);
    background: var(--fp-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--fp-shadow-md);
}

.fp-option-card.selected {
    border-color: var(--fp-primary-royal);
    background: linear-gradient(135deg, var(--fp-primary-light) 0%, rgba(19, 99, 223, 0.08) 100%);
    box-shadow: 0 0 0 4px rgba(19, 99, 223, 0.1);
}

.fp-option-card input[type="radio"],
.fp-option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fp-option-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--fp-radius-xl);
    background: var(--fp-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fp-space-4);
    font-size: 1.5rem;
    color: var(--fp-text-secondary);
    transition: all 0.2s ease;
}

.fp-option-card:hover .fp-option-card-icon {
    background: var(--fp-primary-light);
    color: var(--fp-primary-royal);
}

.fp-option-card.selected .fp-option-card-icon {
    background: var(--fp-primary-royal);
    color: white;
}

.fp-option-card-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
    font-size: var(--fp-text-base);
}

.fp-option-card.selected .fp-option-card-title {
    color: var(--fp-primary-navy);
}

.fp-option-card-description {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    line-height: var(--fp-leading-relaxed);
}

/* Compact Option Cards (for smaller selections) */
.fp-option-card.compact {
    padding: var(--fp-space-4);
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-option-card.compact .fp-option-card-icon {
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 1rem;
    flex-shrink: 0;
}

.fp-option-card.compact .fp-option-card-content {
    flex: 1;
}

.fp-option-card.compact .fp-option-card-title {
    margin-bottom: 0;
    font-size: var(--fp-text-sm);
}

/* Checkbox Option Cards */
.fp-checkbox-option {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    background: var(--fp-bg-primary);
    border: 1px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fp-checkbox-option:hover {
    border-color: var(--fp-primary-sky);
    background: var(--fp-gray-50);
}

.fp-checkbox-option.selected {
    border-color: var(--fp-primary-royal);
    background: var(--fp-primary-light);
}

.fp-checkbox-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--fp-primary-royal);
    flex-shrink: 0;
}

.fp-checkbox-option-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fp-checkbox-option-label {
    font-weight: var(--fp-font-medium);
    color: var(--fp-text-primary);
    font-size: var(--fp-text-sm);
}

/* Onboarding Form Groups */
.fp-onboarding-form-group {
    margin-bottom: var(--fp-space-5);
}

.fp-onboarding-form-label {
    display: block;
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-3);
}

.fp-onboarding-form-label .required {
    color: var(--fp-accent-danger);
}

.fp-onboarding-form-help {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin-top: var(--fp-space-2);
}

/* Onboarding Input Group */
.fp-onboarding-input-group {
    display: flex;
    border: 1px solid var(--fp-gray-300);
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.fp-onboarding-input-group:focus-within {
    border-color: var(--fp-primary-royal);
    box-shadow: 0 0 0 3px rgba(19, 99, 223, 0.1);
}

.fp-onboarding-input-group input {
    flex: 1;
    border: none;
    padding: var(--fp-space-3) var(--fp-space-4);
    font-size: var(--fp-text-base);
    outline: none;
}

.fp-onboarding-input-group .fp-input-suffix {
    padding: var(--fp-space-3) var(--fp-space-4);
    background: var(--fp-gray-100);
    color: var(--fp-text-secondary);
    font-weight: var(--fp-font-medium);
    font-size: var(--fp-text-sm);
    display: flex;
    align-items: center;
}

/* Onboarding Radio Group */
.fp-onboarding-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-3);
}

.fp-onboarding-radio {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-onboarding-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fp-primary-royal);
}

.fp-onboarding-radio label {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-primary);
    cursor: pointer;
}

/* Onboarding Toggle Switches */
.fp-onboarding-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--fp-space-4);
    background: var(--fp-gray-50);
    border-radius: var(--fp-radius-lg);
    margin-bottom: var(--fp-space-3);
}

.fp-onboarding-toggle-content {
    flex: 1;
    padding-right: var(--fp-space-4);
}

.fp-onboarding-toggle-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-1);
}

.fp-onboarding-toggle-description {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}

.fp-onboarding-toggle .form-check-input {
    width: 48px;
    height: 24px;
    margin-top: 2px;
}

.fp-onboarding-toggle .form-check-input:checked {
    background-color: var(--fp-accent-success);
    border-color: var(--fp-accent-success);
}

/* Tutorial Steps */
.fp-tutorial-content {
    margin-bottom: var(--fp-space-6);
}

.fp-tutorial-step {
    display: none;
}

.fp-tutorial-step.active {
    display: block;
}

.fp-tutorial-step-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fp-space-6);
    align-items: center;
}

@media (max-width: 767px) {
    .fp-tutorial-step-content {
        grid-template-columns: 1fr;
    }
}

.fp-tutorial-step-info h5 {
    color: var(--fp-primary-royal);
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-tutorial-step-info p {
    color: var(--fp-text-secondary);
    margin-bottom: var(--fp-space-4);
}

.fp-tutorial-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-tutorial-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-2) 0;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-primary);
}

.fp-tutorial-feature-list li i {
    color: var(--fp-accent-success);
}

.fp-tutorial-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-tutorial-image-card {
    background: var(--fp-gray-50);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-6);
    text-align: center;
    width: 100%;
}

.fp-tutorial-image-card i {
    font-size: 3rem;
    margin-bottom: var(--fp-space-4);
}

.fp-tutorial-image-card h6 {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-tutorial-image-card p {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin: 0;
}

/* Tutorial Navigation */
.fp-tutorial-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-6);
}

.fp-tutorial-indicators {
    display: flex;
    gap: var(--fp-space-2);
}

.fp-tutorial-indicator {
    width: 32px;
    height: 32px;
    border-radius: var(--fp-radius-full);
    border: none;
    font-weight: var(--fp-font-semibold);
    font-size: var(--fp-text-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fp-tutorial-indicator.completed {
    background: var(--fp-accent-success);
    color: white;
}

.fp-tutorial-indicator.active {
    background: var(--fp-primary-royal);
    color: white;
}

.fp-tutorial-indicator.upcoming {
    background: var(--fp-gray-200);
    color: var(--fp-text-muted);
}

/* Success/Complete Page */
.fp-onboarding-success {
    text-align: center;
    padding: var(--fp-space-6) 0;
}

.fp-onboarding-success-icon {
    width: 100px;
    height: 100px;
    border-radius: var(--fp-radius-full);
    background: linear-gradient(135deg, var(--fp-accent-success-light) 0%, rgba(16, 185, 129, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fp-space-6);
    animation: successPulse 2s infinite;
}

.fp-onboarding-success-icon i {
    font-size: 3rem;
    color: var(--fp-accent-success);
}

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

.fp-onboarding-success-title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-3xl);
    font-weight: var(--fp-font-bold);
    color: var(--fp-accent-success);
    margin-bottom: var(--fp-space-3);
}

.fp-onboarding-success-subtitle {
    font-size: var(--fp-text-lg);
    color: var(--fp-text-secondary);
    margin-bottom: var(--fp-space-8);
}

/* Setup Summary Card */
.fp-setup-summary {
    background: var(--fp-gray-50);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-5);
    margin-bottom: var(--fp-space-6);
    text-align: left;
}

.fp-setup-summary-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-primary-royal);
    margin-bottom: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-setup-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 576px) {
    .fp-setup-summary-grid {
        grid-template-columns: 1fr;
    }
}

.fp-setup-summary-item {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-setup-summary-item i {
    font-size: 1.25rem;
}

.fp-setup-summary-item-label {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fp-setup-summary-item-value {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    text-transform: capitalize;
}

/* What's Next Section */
.fp-whats-next {
    margin-bottom: var(--fp-space-6);
    text-align: left;
}

.fp-whats-next-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-4);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-whats-next-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 767px) {
    .fp-whats-next-grid {
        grid-template-columns: 1fr;
    }
}

.fp-whats-next-item {
    display: flex;
    gap: var(--fp-space-3);
}

.fp-whats-next-item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--fp-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.fp-whats-next-item-icon.workout {
    background: rgba(19, 99, 223, 0.1);
    color: var(--fp-primary-royal);
}

.fp-whats-next-item-icon.nutrition {
    background: rgba(16, 185, 129, 0.1);
    color: var(--fp-accent-success);
}

.fp-whats-next-item-icon.social {
    background: rgba(71, 181, 255, 0.1);
    color: var(--fp-primary-sky);
}

.fp-whats-next-item-icon.goals {
    background: rgba(245, 158, 11, 0.1);
    color: var(--fp-accent-warning);
}

.fp-whats-next-item-content h6 {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-1);
}

.fp-whats-next-item-content p {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    margin: 0;
}

/* Quick Actions */
.fp-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-6);
    justify-content: center;
}

/* Help Box */
.fp-help-box {
    background: var(--fp-gray-50);
    border: 1px solid var(--fp-gray-200);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-5);
    text-align: left;
}

.fp-help-box-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-3);
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-help-box-title i {
    color: var(--fp-primary-royal);
}

.fp-help-box p {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
    margin-bottom: var(--fp-space-3);
}

.fp-help-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-help-box ul li {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
    padding: var(--fp-space-2) 0;
}

.fp-help-box ul li a {
    color: var(--fp-primary-royal);
    text-decoration: none;
}

.fp-help-box ul li a:hover {
    text-decoration: underline;
}

/* Welcome Message */
.fp-welcome-message {
    text-align: center;
    padding: var(--fp-space-6) 0;
}

.fp-welcome-message h5 {
    color: var(--fp-primary-royal);
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-2);
}

.fp-welcome-message p {
    color: var(--fp-text-secondary);
    font-size: var(--fp-text-sm);
    margin: 0;
}

/* Welcome Hero Card (for non-gym owners) */
.fp-welcome-hero-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    border-radius: 15px;
}

.fp-welcome-hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.fp-welcome-hero-text {
    opacity: 0.9;
}

.fp-welcome-hero-btn {
    border-radius: 12px;
}

/* Feature Cards */
.fp-feature-card {
    border-radius: 15px;
}

.fp-feature-icon-wrapper {
    border-radius: 50%;
    display: inline-flex;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.fp-feature-icon-wrapper.members {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.fp-feature-icon-wrapper.membership {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
}

.fp-feature-icon-wrapper.analytics {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(2, 132, 199, 0.1) 100%);
}

.fp-feature-icon.members {
    color: #1e40af;
}

.fp-feature-icon.membership {
    color: #22c55e;
}

.fp-feature-icon.analytics {
    color: #0ea5e9;
}

.fp-feature-title {
    color: #1e3a5f;
}

/* ============================================================================
   27. DASHBOARD STYLES
   ============================================================================ */

/* Dashboard Container */
.fp-dashboard {
    min-height: 100vh;
    background: var(--fp-bg-secondary);
}

/* Dashboard Hero Section */
.fp-dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fp-primary-navy) 0%, var(--fp-primary-royal) 100%);
    margin-bottom: var(--fp-space-8);
    padding-top: 100px;
    padding-bottom: 60px;
}

.fp-dashboard-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.fp-dashboard-hero .container-fluid,
.fp-dashboard-hero .container {
    position: relative;
    z-index: 1;
}

.fp-dashboard-hero .fp-btn {
    position: relative;
    z-index: 2;
}

.fp-dashboard-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--fp-space-4);
}

.fp-dashboard-hero-title {
    font-size: var(--fp-text-4xl);
    font-weight: var(--fp-font-bold);
    color: var(--fp-text-inverse);
    margin-bottom: var(--fp-space-3);
}

.fp-dashboard-hero-title i {
    margin-right: var(--fp-space-3);
    color: var(--fp-primary-sky);
}

.fp-dashboard-hero-subtitle {
    font-size: var(--fp-text-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--fp-space-6);
}

/* Dashboard Quick Actions */
.fp-dashboard-actions {
    display: flex;
    justify-content: center;
    gap: var(--fp-space-4);
    flex-wrap: wrap;
}

.fp-dashboard-actions .fp-btn {
    padding: var(--fp-space-3) var(--fp-space-6);
    font-weight: var(--fp-font-semibold);
    border-radius: var(--fp-radius-full);
    box-shadow: var(--fp-shadow-lg);
}

.fp-dashboard-actions .fp-btn-light {
    background: var(--fp-text-inverse);
    color: var(--fp-primary-navy);
    border: none;
}

.fp-dashboard-actions .fp-btn-light:hover {
    background: var(--fp-primary-light);
    transform: translateY(-2px);
}

.fp-dashboard-actions .fp-btn-outline-light {
    background: transparent;
    color: var(--fp-text-inverse);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.fp-dashboard-actions .fp-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--fp-text-inverse);
    transform: translateY(-2px);
}

.fp-dashboard-hero-icon-circle {
    background: rgba(255, 255, 255, 0.15);
}

/* Hero Icon Components */
.fp-hero-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.fp-hero-icon-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.fp-hero-icon-success {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%);
}

.fp-hero-icon-warning {
    background: linear-gradient(135deg, var(--fp-accent-warning) 0%, #d97706 100%);
}

.fp-hero-icon-royal {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
}

.fp-hero-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    margin-bottom: 0;
}

.fp-hero-icon-decorative {
    font-size: 120px;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Dashboard Content */
.fp-dashboard-content {
    padding: 0;
    margin-top: 0;
}

.fp-dashboard-content > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Stats Overview Grid */
.fp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: var(--fp-space-8);
    margin-top: 0;
}

@media (max-width: 1199px) {
    .fp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .fp-stat-card {
        height: 218px;
        padding: 24px;
    }
}

@media (max-width: 575px) {
    .fp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    
    .fp-stat-card {
        height: 218px !important;
        padding: 24px !important;
        min-height: 218px !important;
    }
    
    .fp-stat-card-icon {
        font-size: 2.5rem !important;
        margin-bottom: 12px !important;
    }
    
    .fp-stat-card-title {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }
    
    .fp-stat-card-value {
        font-size: 1.75rem !important;
    }
}

/* Stat Card */
.fp-stat-card {
    position: relative;
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    color: rgb(255, 255, 255);
    border: 0.8px solid rgb(229, 231, 235);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    transition: all 0.3s ease;
    overflow: hidden;
    height: 218px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: fpFadeInUp 0.6s ease-out 0.1s both;
}

.fp-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.fp-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
}

.fp-stat-card.points {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
}

.fp-stat-card.streaks {
    background: linear-gradient(135deg, var(--fp-accent-orange) 0%, #E65100 100%);
}

.fp-stat-card.workouts {
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
}

.fp-stat-card.achievements {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #047857 100%);
}

.fp-stat-card.fp-stat-weight {
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
}

.fp-stat-card.fp-stat-bmi {
    background: linear-gradient(135deg, var(--fp-accent-orange) 0%, #E65100 100%);
}

.fp-stat-card.fp-stat-goals {
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
}

.fp-stat-card.fp-stat-measurements {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #047857 100%);
}

.fp-stat-card.time {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
}

.fp-stat-card.fp-stat-card-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.fp-stat-card.calories {
    background: linear-gradient(135deg, var(--fp-accent-orange) 0%, #E65100 100%);
}

.fp-stat-card.protein {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
}

.fp-stat-card.carbs {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

.fp-stat-card.fat {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.fp-stat-card.favorite-focus {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #047857 100%);
}

.fp-stat-card-icon {
    font-size: 3rem;
    margin-bottom: var(--fp-space-3);
    transition: transform 0.3s ease;
}

.fp-stat-card:hover .fp-stat-card-icon {
    transform: scale(1.2) rotate(5deg);
}

.fp-stat-card-title {
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--fp-space-2);
    opacity: 0.9;
    line-height: 25.6px;
}

.fp-stat-card-value {
    font-size: var(--fp-text-4xl);
    font-weight: var(--fp-font-bold);
    margin-bottom: 0;
}

.fp-stat-card-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--fp-radius-full);
    overflow: hidden;
    margin-bottom: var(--fp-space-2);
}

.fp-stat-card-progress-bar {
    height: 100%;
    background: var(--fp-text-inverse);
    border-radius: var(--fp-radius-full);
    transition: width 1.5s ease-out;
}

.fp-stat-card-label {
    font-size: var(--fp-text-xs);
    opacity: 0.85;
}

/* Mini Stat Cards (for compact displays) */
.fp-stat-mini {
    padding: 12px 8px;
    text-align: center;
    border-radius: var(--fp-radius-lg);
    background: var(--fp-bg-secondary);
    border: 1px solid var(--fp-border-color);
    transition: all 0.2s ease;
}

.fp-stat-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fp-stat-mini.workouts {
    background: linear-gradient(135deg, rgba(19, 99, 223, 0.1) 0%, rgba(6, 40, 61, 0.05) 100%);
    border-color: rgba(19, 99, 223, 0.2);
}

.fp-stat-mini.calories {
    background: linear-gradient(135deg, rgba(255, 111, 0, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-color: rgba(255, 111, 0, 0.2);
}

.fp-stat-mini.exercises {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border-color: rgba(40, 167, 69, 0.2);
}

.fp-stat-mini-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fp-text-primary);
    line-height: 1.2;
}

.fp-stat-mini-label {
    font-size: 0.75rem;
    color: var(--fp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Dashboard Section Card */
.fp-dashboard-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Only apply full height when inside a grid */
.fp-dashboard-grid .fp-dashboard-card {
    height: 100%;
}

.fp-dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--fp-shadow-xl);
}

.fp-dashboard-card-header {
    padding: 1.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
}

.fp-dashboard-card-header h5 {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
}

.fp-dashboard-card-header i {
    color: #ffffff;
}

.fp-dashboard-card-header.streaks {
    background: linear-gradient(135deg, var(--fp-accent-orange) 0%, #E65100 100%);
}

.fp-dashboard-card-header.achievements {
    background: linear-gradient(135deg, var(--fp-accent-warning) 0%, #D97706 100%);
}

.fp-dashboard-card-header.workouts {
    background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-primary-royal) 100%);
}

.fp-dashboard-card-header.goals {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #047857 100%);
}

.fp-dashboard-card-header.progress {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
}

.fp-dashboard-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-dashboard-card-icon i {
    font-size: 1.5rem;
    color: var(--fp-text-inverse);
}

.fp-dashboard-card-header-text h5 {
    margin: 0;
    font-size: var(--fp-text-lg);
    font-weight: var(--fp-font-bold);
    color: var(--fp-text-inverse);
}

.fp-dashboard-card-header-text span {
    font-size: var(--fp-text-sm);
    color: rgba(255, 255, 255, 0.85);
}

.fp-dashboard-card-body {
    padding: var(--fp-space-5);
}

/* Dashboard List Item */
.fp-dashboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fp-space-4);
    background: var(--fp-bg-secondary);
    border-radius: var(--fp-radius-lg);
    margin-bottom: var(--fp-space-3);
    transition: all 0.2s ease;
}

.fp-dashboard-item:last-child {
    margin-bottom: 0;
}

.fp-dashboard-item:hover {
    background: var(--fp-primary-light);
    transform: translateX(4px);
}

.fp-dashboard-item-content h6 {
    margin: 0 0 var(--fp-space-1);
    font-size: var(--fp-text-base);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
}

.fp-dashboard-item-content small {
    color: var(--fp-text-secondary);
    font-size: var(--fp-text-sm);
}

.fp-dashboard-item-meta {
    text-align: right;
}

/* Dashboard Empty State */
.fp-dashboard-empty {
    text-align: center;
    padding: var(--fp-space-8) var(--fp-space-4);
}

.fp-dashboard-empty i {
    font-size: 3rem;
    color: var(--fp-gray-300);
    margin-bottom: var(--fp-space-4);
}

.fp-dashboard-empty p {
    color: var(--fp-text-secondary);
    margin-bottom: var(--fp-space-4);
}

.fp-dashboard-empty .fp-btn {
    padding: var(--fp-space-2) var(--fp-space-5);
    font-size: var(--fp-text-sm);
}

/* Dashboard Card Buttons */
.fp-dashboard-card-body .fp-btn {
    padding: var(--fp-space-2) var(--fp-space-4);
    font-size: var(--fp-text-sm);
}

.fp-dashboard-card-body .fp-btn i {
    font-size: 0.85em;
}

@media (max-width: 767px) {
    .fp-dashboard-card-body .fp-btn {
        padding: var(--fp-space-2) var(--fp-space-3);
        font-size: var(--fp-text-xs);
        width: 100%;
        justify-content: center;
    }
    
    .fp-dashboard-empty .fp-btn {
        padding: var(--fp-space-3) var(--fp-space-4);
        font-size: var(--fp-text-sm);
        width: auto;
        max-width: 200px;
    }
}

/* Achievement Alert */
.fp-achievement-alert {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-6);
    margin-bottom: var(--fp-space-8);
    color: var(--fp-text-inverse);
    box-shadow: var(--fp-shadow-lg);
}

.fp-achievement-alert-header {
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
    margin-bottom: var(--fp-space-4);
}

.fp-achievement-alert-header i {
    font-size: 3rem;
    color: var(--fp-accent-warning);
}

.fp-achievement-alert-header h4 {
    margin: 0 0 var(--fp-space-1);
    font-weight: var(--fp-font-bold);
}

.fp-achievement-alert-header p {
    margin: 0;
    opacity: 0.9;
}

.fp-achievement-alert-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-4);
    margin-bottom: var(--fp-space-4);
}

@media (max-width: 767px) {
    .fp-achievement-alert-grid {
        grid-template-columns: 1fr;
    }
}

.fp-achievement-alert-item {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
}

.fp-achievement-alert-item i {
    font-size: 2rem;
    color: var(--fp-accent-warning);
}

.fp-achievement-alert-item h6 {
    margin: 0 0 var(--fp-space-1);
    font-weight: var(--fp-font-bold);
}

.fp-achievement-alert-item small {
    display: block;
    opacity: 0.85;
}

.fp-achievement-alert-item .badge {
    margin-top: var(--fp-space-2);
    background: var(--fp-accent-warning);
    color: var(--fp-primary-navy);
    font-weight: var(--fp-font-semibold);
}

/* Progress Section */
.fp-progress-section {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-md);
    overflow: hidden;
    margin-bottom: var(--fp-space-8);
}

.fp-progress-header {
    padding: var(--fp-space-5);
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fp-space-4);
}

.fp-progress-header-left {
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
}

.fp-progress-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-progress-header-icon i {
    font-size: 1.5rem;
    color: var(--fp-text-inverse);
}

.fp-progress-header-text h5 {
    margin: 0;
    color: var(--fp-text-inverse);
    font-weight: var(--fp-font-bold);
}

.fp-progress-header-text span {
    font-size: var(--fp-text-sm);
    color: rgba(255, 255, 255, 0.85);
}

/* Time Range Buttons */
.fp-time-range {
    display: flex;
    gap: var(--fp-space-2);
}

.fp-time-range-btn {
    padding: var(--fp-space-2) var(--fp-space-4);
    border-radius: var(--fp-radius-full);
    font-size: var(--fp-text-sm);
    font-weight: var(--fp-font-medium);
    background: rgba(255, 255, 255, 0.15);
    color: var(--fp-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fp-time-range-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.fp-time-range-btn.active {
    background: var(--fp-text-inverse);
    color: var(--fp-primary-navy);
    border-color: var(--fp-text-inverse);
}

/* Progress Charts Grid */
.fp-progress-body {
    padding: var(--fp-space-6);
}

.fp-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-6);
    margin-bottom: var(--fp-space-6);
}

@media (max-width: 991px) {
    .fp-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Chart Card */
.fp-chart-card {
    background: linear-gradient(135deg, var(--fp-bg-primary) 0%, var(--fp-bg-secondary) 100%);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-5);
    box-shadow: var(--fp-shadow-sm);
    transition: all 0.3s ease;
}

.fp-chart-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fp-shadow-md);
}

.fp-chart-title {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    font-size: var(--fp-text-base);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-4);
}

.fp-chart-title i {
    font-size: 1.25rem;
}

.fp-chart-title i.workout { color: var(--fp-primary-royal); }
.fp-chart-title i.weight { color: var(--fp-primary-sky); }
.fp-chart-title i.goals { color: var(--fp-accent-warning); }
.fp-chart-title i.nutrition { color: var(--fp-accent-success); }

.fp-chart-container {
    height: 200px;
    position: relative;
}

.fp-chart-summary {
    text-align: center;
    margin-top: var(--fp-space-3);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
}

/* Progress Insights */
.fp-progress-insights {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-5);
}

.fp-progress-insights-title {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    color: var(--fp-text-inverse);
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-4);
}

.fp-progress-insights-title i {
    color: var(--fp-accent-warning);
}

.fp-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 767px) {
    .fp-insights-grid {
        grid-template-columns: 1fr;
    }
}

.fp-insight-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-5);
    text-align: center;
    transition: all 0.3s ease;
}

.fp-insight-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.fp-insight-card i {
    font-size: 2rem;
    margin-bottom: var(--fp-space-2);
    transition: transform 0.3s ease;
}

.fp-insight-card:hover i {
    transform: scale(1.2) rotate(5deg);
}

.fp-insight-card i.trend { color: var(--fp-accent-success); }
.fp-insight-card i.consistency { color: var(--fp-primary-royal); }
.fp-insight-card i.completion { color: var(--fp-accent-warning); }

.fp-insight-value {
    font-size: var(--fp-text-2xl);
    font-weight: var(--fp-font-bold);
    color: var(--fp-text-primary);
    margin: var(--fp-space-2) 0;
}

.fp-insight-label {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
}

/* Goal Progress Bar */
.fp-goal-item {
    padding: var(--fp-space-4);
    background: var(--fp-bg-secondary);
    border-radius: var(--fp-radius-lg);
    margin-bottom: var(--fp-space-3);
}

.fp-goal-item:last-child {
    margin-bottom: 0;
}

.fp-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-2);
}

.fp-goal-header h6 {
    margin: 0;
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
}

.fp-goal-progress {
    height: 10px;
    background: var(--fp-gray-200);
    border-radius: var(--fp-radius-full);
    overflow: hidden;
    margin-bottom: var(--fp-space-2);
}

.fp-goal-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--fp-primary-royal) 0%, var(--fp-primary-sky) 100%);
    border-radius: var(--fp-radius-full);
    transition: width 1s ease-out;
}

.fp-goal-meta {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
}

/* Dashboard Section Grid */
.fp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-6);
    margin-bottom: var(--fp-space-8);
}

@media (max-width: 991px) {
    .fp-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation Classes */
.fp-slide-in-left {
    animation: fpSlideInLeft 0.6s ease-out;
}

.fp-slide-in-right {
    animation: fpSlideInRight 0.6s ease-out;
}

.fp-fade-in-up {
    animation: fpFadeInUp 0.6s ease-out;
}

@keyframes fpSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fpSlideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Staggered animations for stat cards */
.fp-stat-card:nth-child(1) { animation: fpFadeInUp 0.6s ease-out 0.1s both; }
.fp-stat-card:nth-child(2) { animation: fpFadeInUp 0.6s ease-out 0.2s both; }
.fp-stat-card:nth-child(3) { animation: fpFadeInUp 0.6s ease-out 0.3s both; }
.fp-stat-card:nth-child(4) { animation: fpFadeInUp 0.6s ease-out 0.4s both; }


/* ============================================================================
   28. NUTRITION STYLES - Meal Tracking & Food Logging
   ============================================================================ */

/* Nutrition Hero Section */
.fp-nutrition-hero {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%);
    padding: var(--fp-space-12) 0;
    padding-top: 100px;
    min-height: 350px;
    margin-top: -5rem;
    position: relative;
    overflow: hidden;
}

.fp-nutrition-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.fp-nutrition-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.fp-nutrition-hero-title {
    font-size: var(--fp-text-4xl);
    font-weight: var(--fp-font-bold);
    color: var(--fp-text-inverse);
    margin-bottom: var(--fp-space-3);
}

.fp-nutrition-hero-title i {
    margin-right: var(--fp-space-3);
}

.fp-nutrition-hero-subtitle {
    font-size: var(--fp-text-xl);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--fp-space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.fp-nutrition-actions {
    display: flex;
    justify-content: center;
    gap: var(--fp-space-4);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .fp-nutrition-hero {
        padding-top: 90px;
        min-height: 300px;
        margin-top: -5rem;
    }
    
    .fp-nutrition-hero-title {
        font-size: var(--fp-text-2xl);
    }
    
    .fp-nutrition-hero-subtitle {
        font-size: var(--fp-text-base);
    }
    
    .fp-nutrition-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .fp-nutrition-actions .fp-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Nutrition Stats Grid */
.fp-nutrition-stats {
    display: grid;
    grid-template-columns: 306px 306px 306px 306px;
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 24px;
    width: 1296px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Analytics Stats Container */
.fp-nutrition-stats.mb-4 {
    width: 1296px;
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 48px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .fp-nutrition-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 100%;
    }
    
    .fp-nutrition-stats.mb-4 {
        width: 1296px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575px) {
    .fp-nutrition-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .fp-nutrition-stat-card {
        padding: 16px;
        min-height: 150px;
    }
    
    .fp-stat-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .fp-stat-value {
        font-size: 1.5rem;
    }
    
    .fp-stat-label {
        font-size: 0.75rem;
    }
}

/* Analytics Charts Row - Same width as stats cards */
.fp-analytics-charts-row {
    width: 1296px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .fp-analytics-charts-row {
        width: 100%;
    }
}

/* Analytics Nutrition Stat Card */
.fp-nutrition-stat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    width: 306px;
    height: 238.556px;
    border: 0.888889px solid rgb(229, 231, 235);
    border-radius: 16px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgb(19, 99, 223) 0%, rgb(6, 40, 61) 100%);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    transition: all 0.3s ease;
    animation: fpFadeInUp 0.6s ease-out 0.1s both;
}

/* 4th card - Consistency Score - Royal Blue */
.fp-nutrition-stat-card.fp-stat-fat {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
}

@media (max-width: 991px) {
    .fp-nutrition-stat-card {
        width: 100%;
        height: auto;
        min-height: 180px;
    }
}

.fp-nutrition-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
}

.fp-nutrition-stat-card:hover .fp-stat-icon {
    transform: scale(1.1);
}

.fp-nutrition-stat-card:hover .fp-stat-icon i {
    transform: scale(1.1);
}

.fp-stat-icon {
    font-family: "Font Awesome 6 Free";
    font-size: 48px !important;
    font-weight: 900;
    height: auto;
    line-height: 48px !important;
    margin-bottom: 12px !important;
    text-align: center;
    width: auto;
    color: rgb(255, 255, 255) !important;
    background: none !important;
    background-color: transparent !important;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.3s ease;
    opacity: 1 !important;
}

.fp-stat-icon i {
    background: none !important;
    background-color: transparent !important;
    color: rgb(255, 255, 255) !important;
    font-size: 48px !important;
    opacity: 1 !important;
    transition: transform 0.3s ease;
}

.fp-nutrition-stat-card .fp-stat-icon,
.fp-nutrition-stat-card .fp-stat-icon i {
    background: none !important;
    background-color: transparent !important;
    color: rgb(255, 255, 255) !important;
}

.fp-stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fp-stat-label {
    font-size: 14px;
    font-weight: 600;
    height: 22.3889px;
    letter-spacing: 0.7px;
    line-height: 22.4px;
    margin-bottom: 8px;
    opacity: 0.9;
    text-align: center;
    text-transform: uppercase;
    width: 256.222px;
    color: rgb(255, 255, 255);
}

.fp-stat-value {
    font-size: 36px;
    font-weight: 700;
    height: 57.5972px;
    line-height: 57.6px;
    margin-bottom: 12px;
    text-align: center;
    width: 256.222px;
    color: rgb(255, 255, 255);
}

/* Nutrition Stat Card */
.fp-nutrition-stat {
    padding: var(--fp-space-5);
    border-radius: var(--fp-radius-xl);
    text-align: center;
    color: var(--fp-text-inverse);
    box-shadow: var(--fp-shadow-md);
    transition: all 0.3s ease;
    cursor: pointer;
}

.fp-nutrition-stat:hover {
    transform: translateY(-5px);
    box-shadow: var(--fp-shadow-lg);
}

.fp-nutrition-stat.calories {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

.fp-nutrition-stat.protein {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%);
}

.fp-nutrition-stat.carbs {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.fp-nutrition-stat.fat {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.fp-nutrition-stat-icon {
    font-size: 2rem;
    opacity: 0.8;
    margin-bottom: var(--fp-space-3);
}

.fp-nutrition-stat-value {
    font-size: var(--fp-text-2xl);
    font-weight: var(--fp-font-bold);
    margin-bottom: var(--fp-space-1);
}

.fp-nutrition-stat-label {
    font-size: var(--fp-text-sm);
    opacity: 0.9;
}

.fp-nutrition-stat-edit {
    font-size: var(--fp-text-xs);
    opacity: 0.7;
    margin-top: var(--fp-space-2);
}

/* High-specificity fallbacks to ensure stat cards show correct color theming */
/* Target both class and data-nutrition attributes and add !important to override inline/other rules */
.fp-nutrition-stat.calories,
.fp-nutrition-stat[data-nutrition="calories"] {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
}

.fp-nutrition-stat.protein,
.fp-nutrition-stat[data-nutrition="protein"] {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%) !important;
}

.fp-nutrition-stat.carbs,
.fp-nutrition-stat[data-nutrition="carbs"] {
    background: linear-gradient(135deg, var(--fp-primary-sky, #47B5FF) 0%, var(--fp-primary-royal, #1363DF) 100%) !important;
}

.fp-nutrition-stat.fat,
.fp-nutrition-stat[data-nutrition="fat"] {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
}


/* Calorie Balance Card */
.fp-calorie-balance {
    background: linear-gradient(180deg, var(--fp-primary-navy) 0%, #1e3a5f 100%);
    border-radius: var(--fp-radius-2xl);
    padding: var(--fp-space-6);
    color: var(--fp-text-inverse);
    box-shadow: var(--fp-shadow-xl);
}

.fp-calorie-balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-5);
}

.fp-calorie-balance-header h5 {
    margin: 0;
    font-weight: var(--fp-font-bold);
}


/* ============================================================================
   30. BASE TEMPLATE COMPONENTS
   ============================================================================ */

/* Navbar Brand */
.fp-navbar-brand {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-sky) !important;
    margin-left: 1rem;
}

.fp-navbar-brand-icon {
    margin-right: 0.01rem;
}

/* Alert Gradients */
.fp-alert-achievement {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-left: 5px solid #ffd700;
}

.fp-alert-celebration {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    color: white;
    border-left: 5px solid #ffd700;
}

.fp-alert-encouragement {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    color: white;
}

.fp-alert-motivation {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #212529;
}

/* Footer */
.fp-footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    background-color: #1e3a5f !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    color: white !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

footer.fp-footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    background-color: #1e3a5f !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    color: white !important;
    margin-bottom: 0 !important;
}

footer.fp-footer#support {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    background-color: #1e3a5f !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    color: white !important;
    margin-bottom: 0 !important;
}

/* Override any potential Bootstrap footer defaults */
footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    background-color: #1e3a5f !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    margin-bottom: 0 !important;
}

footer .container {
    background: transparent !important;
}

footer.pt-5.mt-5.fp-footer#support {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    background-color: #1e3a5f !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%) !important;
    color: white !important;
    margin-bottom: 0 !important;
}

/* Ensure footer children also inherit proper colors */
.fp-footer *,
footer.fp-footer *,
footer * {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.fp-footer-brand-circle {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
}

.fp-footer-description {
    font-size: 0.9rem;
}

.fp-footer-social-link {
    transition: color 0.3s;
}

.fp-footer-heading {
    font-size: 0.95rem;
}

.fp-footer-link {
    font-size: 0.875rem;
    transition: color 0.3s;
}

.fp-footer-divider {
    border-color: rgba(255,255,255,0.1) !important;
}

.fp-footer-heart {
    color: #ef4444;
}


/* ============================================================================
   31. COMMON UTILITY CLASSES
   ============================================================================ */

/* Progress bars */
.fp-progress-thin {
    height: 5px;
}

.fp-progress-medium {
    height: 6px;
}

.fp-progress-thick {
    height: 8px;
}

.fp-progress-extra-thick {
    height: 10px;
}

/* Display utilities */
.fp-hidden {
    display: none;
}

/* Form specific */
.fp-form-monospace {
    font-family: monospace;
}

/* Icon colors - OAuth providers */
.fp-icon-google {
    color: #EA4335;
}

.fp-icon-facebook {
    color: #1877F2;
}

.fp-icon-microsoft {
    color: #00A4EF;
}

.fp-icon-apple {
    color: #000;
}

/* Nutrition/Food specific */
.fp-food-card-placeholder {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.fp-food-placeholder-icon {
    color: #94a3b8;
    font-size: 0.85rem;
}

.fp-food-calorie-text {
    color: #1e40af;
}

.fp-food-stats-section {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-radius: 15px;
}

.fp-food-emphasis {
    color: #1e3a5f;
}

/* Profile specific */
.fp-profile-alert-info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.fp-avatar-preview {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.fp-avatar-preview-small {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Workout timer specific */
.fp-workout-timer-card {
    border-radius: 20px;
    overflow: hidden;
    min-height: 250px;
}

.fp-workout-dashboard-header {
    margin-bottom: var(--fp-space-8);
}

.fp-workout-gradient-overlay {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.9) 0%, rgba(30, 64, 175, 0.85) 50%, rgba(15, 23, 42, 0.9) 100%);
}

.fp-workout-exercise-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    border-radius: 20px;
}

.fp-workout-exercise-thumb {
    width: 50px;
    height: 50px;
}

.fp-workout-exercise-thumb-placeholder {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* Padding and sizing utilities */
.fp-no-vertical-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fp-body-bg-light {
    background-color: #f8fafc;
}

.fp-rounded-20 {
    border-radius: 20px;
}

.fp-rounded-15 {
    border-radius: 15px;
}

.fp-rounded-12 {
    border-radius: 12px;
}

/* Goals specific */
.fp-goals-hero-padding {
    padding: 32px 40px;
    margin-bottom: 24px;
}

.fp-goals-hero-content-no-margin {
    margin-bottom: 0;
}

.fp-goals-title-large {
    font-size: 36px;
    margin-bottom: 8px;
}

/* Nutrition specific */
.fp-nutrition-hero {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    min-height: 300px;
}

.fp-nutrition-hero-pattern {
    opacity: 0.1;
}

.fp-nutrition-hero-emoji-1 {
    top: 20%;
    left: 10%;
    font-size: 3rem;
    color: white;
}

.fp-nutrition-hero-emoji-2 {
    top: 60%;
    left: 85%;
    font-size: 2.5rem;
    color: white;
}

.fp-nutrition-hero-emoji-3 {
    top: 15%;
    left: 80%;
    font-size: 2rem;
    color: white;
}

.fp-nutrition-hero-emoji-4 {
    top: 70%;
    left: 15%;
    font-size: 2.5rem;
    color: white;
}

.fp-nutrition-card-header {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    border: none;
}

.fp-nutrition-card-subtitle {
    opacity: 0.9;
}

/* Status icon colors */
.fp-icon-verified {
    color: var(--fp-success);
}

.fp-icon-unverified {
    color: var(--fp-warning);
}


/* ============================================================================
   29. UNIFIED DASHBOARD COMPONENTS
   Royal Blue Theme - Based on Main Dashboard Styling
   ============================================================================ */

/* Generic Hero Section - Royal Blue Background with Icon */
.fp-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 48px 0;
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    min-height: 220px;
    margin-bottom: 32px;
    margin-top: 0;
}

.fp-hero-decorative-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.fp-hero > .container,
.fp-hero > .container-fluid {
    position: relative;
    z-index: 1;
}

.fp-hero .btn,
.fp-hero .fp-btn {
    position: relative;
    z-index: 2;
}

.fp-hero-decorative-icon {
    position: absolute;
    color: white;
    pointer-events: none;
    z-index: 0;
}

.fp-hero-decorative-icon.top-left {
    top: 20%;
    left: 10%;
    font-size: 3rem;
}

.fp-hero-decorative-icon.top-right {
    top: 15%;
    left: 80%;
    font-size: 2rem;
}

.fp-hero-decorative-icon.top-right-2 {
    top: 60%;
    left: 85%;
    font-size: 2.5rem;
}

.fp-hero-decorative-icon.bottom-left {
    top: 70%;
    left: 15%;
    font-size: 2.5rem;
}

.fp-hero-content {
    position: relative;
    z-index: 2;
}

.fp-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.fp-hero-title i {
    margin-right: 12px;
}

.fp-hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    line-height: 1.6;
}

/* Colored Gradient Stat Cards */
.fp-stat-card-gradient {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.fp-stat-card-gradient:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.fp-stat-card-gradient .card-body {
    padding: 24px;
}

.fp-stat-card-gradient .text-xs {
    font-size: 0.75rem;
}

/* Gradient Backgrounds for Stat Cards */
.fp-bg-gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.fp-bg-gradient-cyan {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    color: white !important;
}

.fp-bg-gradient-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    color: white !important;
}

.fp-bg-gradient-gold {
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%) !important;
    color: white !important;
}

.fp-bg-gradient-indigo {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    color: white !important;
}

.fp-bg-gradient-orange {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    color: white !important;
}

.fp-bg-gradient-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: white !important;
}

.fp-bg-gradient-royal {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: white !important;
}

.fp-bg-gradient-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
}

.fp-bg-gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.fp-bg-gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

/* Modern Progress Bar */
.fp-progress-modern {
    height: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.fp-progress-bar-modern {
    height: 100%;
    background: white;
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* Text Opacity Utilities */
.fp-text-opacity-90 {
    opacity: 0.9 !important;
}

.fp-text-opacity-85 {
    opacity: 0.85 !important;
}

/* Icon Wrapper for Stat Cards */
.icon-wrapper {
    display: inline-block;
}

.icon-wrapper i {
    opacity: 0.95;
}

/* Text Color Utilities */
.text-purple {
    color: #8b5cf6 !important;
}

/* Modern Card Styling */
.fp-modern-card {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.fp-modern-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.fp-modern-card .card-header {
    border-bottom: none;
    padding: 20px 24px;
    border-radius: 15px 15px 0 0;
}

/* Section Card with Gradient Header */
.fp-section-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 24px;
}

.fp-section-card .card-header {
    border-bottom: none;
    padding: 20px 24px;
}

/* Header Gradient Styles */
.fp-header-gradient-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.1) 100%);
    border-radius: 15px 15px 0 0;
}

.fp-header-gradient-primary {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-radius: 15px 15px 0 0;
}

.fp-header-gradient-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-radius: 15px 15px 0 0;
}

.fp-header-gradient-info {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(2, 132, 199, 0.1) 100%);
    border-radius: 15px 15px 0 0;
}

.fp-header-gradient-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-radius: 15px 15px 0 0;
}

.fp-header-gradient-indigo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 15px 15px 0 0;
}

/* Profile Completion Bar */
.fp-profile-completion-container {
    background: var(--fp-bg-secondary);
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.fp-profile-completion-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-sky) 100%);
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* Class Icon Wrapper */
.fp-class-icon-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Badge Styling */
.fp-badge-gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.fp-badge-gradient-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.fp-badge-rounded-pill {
    border-radius: 50rem;
    padding: 8px 16px;
    font-weight: 600;
}

/* Icon Colors for Sections */
.fp-icon-warning {
    color: #f59e0b;
}

.fp-icon-primary {
    color: #3b82f6;
}

.fp-icon-success {
    color: #22c55e;
}

.fp-icon-error {
    color: var(--fp-accent-error);
}

.fp-icon-royal {
    color: var(--fp-primary-royal);
}


/* ============================================================================
   SMART WORKOUTS PAGE STYLES
   ============================================================================ */

/* Quick Action Buttons - Rounded Pill with Bold Border */
.fp-btn-quick-action {
    border-width: 2px;
    font-weight: 600;
}

/* Divider with Subtle Border */
.fp-divider-subtle {
    border-color: rgba(0, 0, 0, 0.1);
}

/* Pro Tip Card Text */
.fp-text-white {
    color: white;
}

.fp-text-white-90 {
    color: rgba(255, 255, 255, 0.9);
}

.fp-icon-info {
    color: #0ea5e9;
}

.fp-icon-purple {
    color: #8b5cf6;
}

.fp-icon-achievement {
    color: #F59E0B;
}

/* Workout Background & Overlay */
.fp-workout-bg {
    background-image: url('/static/img/background-workout.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 500px;
}

.fp-workout-overlay {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    min-height: 100%;
}

/* Rounded Circle for Profile Icons */
.fp-rounded-circle-icon {
    border-radius: 50%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.15);
}

/* Dark Gradient Hero */
.fp-hero-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
    padding: 48px 0;
}

/* Button Outline Styled */
.fp-btn-outline-styled {
    border-width: 2px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.fp-btn-outline-styled:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Primary Gradient Button */
.fp-btn-primary-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.fp-btn-primary-gradient:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

/* Utility Classes for Common Patterns */
.fp-border-radius-15 {
    border-radius: 15px !important;
}

.fp-shadow-lg-custom {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.fp-min-height-220 {
    min-height: 220px;
}

.fp-min-height-500 {
    min-height: 500px;
}

/* Card with Avatar/Icon Circle */
.fp-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-avatar-circle-lg {
    width: 48px;
    height: 48px;
}

.fp-avatar-circle-xl {
    width: 64px;
    height: 64px;
}

/* Hide element utility */
.fp-hidden {
    display: none !important;
}

/* Responsive utilities for hero sections */
@media (max-width: 768px) {
    .fp-hero {
        padding: 100px 0 40px 0;
        min-height: 200px;
    }
    
    .fp-hero .row {
        text-align: center;
    }
    
    .fp-hero .col-lg-4,
    .fp-hero .col-lg-8 {
        text-align: center !important;
    }
    
    .fp-hero .col-lg-4 {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 12px;
        margin-top: 1rem;
    }
    
    .fp-hero .col-lg-4 .btn {
        margin: 0 !important;
        flex: 0 1 auto;
        white-space: nowrap;
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem !important;
    }
    
    .fp-dashboard-hero {
        padding-top: 105px !important;
        padding-bottom: 55px !important;
        min-height: 290px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .fp-dashboard-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    .fp-hero-title {
        font-size: 1.75rem;
    }
    
    .fp-hero-subtitle {
        font-size: 1rem;
    }
    
    .fp-dashboard-hero-title {
        font-size: 1.75rem;
        text-align: center;
    }
    
    .fp-dashboard-hero-subtitle {
        font-size: 0.95rem;
        text-align: center;
    }
    
    .fp-dashboard-actions {
        flex-direction: row !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px !important;
    }
    
    .fp-dashboard-actions .fp-btn {
        flex: 0 1 auto;
        margin: 0 !important;
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem !important;
        white-space: nowrap;
    }
}

.fp-calorie-balance-header small {
    opacity: 0.7;
    display: block;
}

.fp-calorie-balance-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-4);
}

.fp-calorie-metric {
    text-align: center;
}

.fp-calorie-metric i {
    font-size: 1.5rem;
    margin-bottom: var(--fp-space-2);
}

.fp-calorie-metric.eaten i { color: #60A5FA; }
.fp-calorie-metric.exercise i { color: #F97316; }

.fp-calorie-metric h3 {
    font-size: var(--fp-text-2xl);
    font-weight: var(--fp-font-bold);
    margin: 0;
}

.fp-calorie-metric small {
    font-size: var(--fp-text-sm);
    opacity: 0.7;
}

/* Circular Progress Ring */
.fp-calorie-ring {
    position: relative;
    width: 160px;
    height: 160px;
}

.fp-calorie-ring svg {
    transform: rotate(-90deg);
}

.fp-calorie-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.fp-calorie-ring-value {
    font-size: var(--fp-text-3xl);
    font-weight: var(--fp-font-bold);
}

.fp-calorie-ring-label {
    font-size: var(--fp-text-sm);
    opacity: 0.7;
}

/* Macros Section */
.fp-macros-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--fp-space-4);
    margin-top: var(--fp-space-4);
}

.fp-macros-section h6 {
    margin-bottom: var(--fp-space-4);
}

.fp-macros-grid {
    display: flex;
    justify-content: space-around;
}

.fp-macro-item {
    text-align: center;
}

.fp-macro-ring {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}

.fp-macro-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: var(--fp-font-bold);
    font-size: var(--fp-text-sm);
}

.fp-macro-label {
    margin-top: var(--fp-space-2);
}

.fp-macro-label i {
    font-size: 0.7rem;
    margin-right: var(--fp-space-1);
}

.fp-macro-label i.carbs { color: #60A5FA; }
.fp-macro-label i.protein { color: #A78BFA; }
.fp-macro-label i.fat { color: #FBBF24; }

.fp-macro-value {
    font-size: var(--fp-text-xs);
    opacity: 0.7;
    display: block;
}

/* Meal Cards */
.fp-meal-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.fp-meal-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--fp-shadow-lg);
}

.fp-meal-card-header {
    padding: var(--fp-space-4);
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    text-align: center;
}

.fp-meal-card-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-2) var(--fp-space-4);
    border-radius: var(--fp-radius-full);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-inverse);
}

.fp-meal-card-badge.breakfast { background: var(--fp-primary-royal); }
.fp-meal-card-badge.lunch { background: var(--fp-primary-sky); color: var(--fp-primary-navy); }
.fp-meal-card-badge.dinner { background: var(--fp-accent-warning); color: var(--fp-primary-navy); }
.fp-meal-card-badge.snack { background: var(--fp-gray-500); }

.fp-meal-card-time {
    font-size: var(--fp-text-sm);
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--fp-space-2);
}

.fp-meal-card-body {
    padding: var(--fp-space-5);
}

.fp-meal-card-title {
    font-size: var(--fp-text-base);
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-3);
}

/* Meal Nutrition Grid */
.fp-meal-nutrition {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fp-space-3);
}

.fp-meal-nutrition-item {
    text-align: center;
    padding: var(--fp-space-2);
    border-radius: var(--fp-radius-md);
    background: var(--fp-bg-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.fp-meal-nutrition-item:hover {
    background: var(--fp-primary-light);
}

.fp-meal-nutrition-value {
    font-size: var(--fp-text-lg);
    font-weight: var(--fp-font-bold);
}

.fp-meal-nutrition-value.calories { color: #F97316; }
.fp-meal-nutrition-value.protein { color: var(--fp-accent-success); }
.fp-meal-nutrition-value.carbs { color: #F59E0B; }
.fp-meal-nutrition-value.fat { color: #8B5CF6; }

.fp-meal-nutrition-label {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-secondary);
}

.fp-meal-card-footer {
    padding: var(--fp-space-3) var(--fp-space-5);
    border-top: 1px solid var(--fp-border-color);
    display: flex;
    justify-content: center;
}

/* ============================================================================
   GYM OWNER DASHBOARD STYLES
   ============================================================================ */

/* Utility Classes */
.text-xs {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Modern Card - Used for gym owner dashboard sections */
.fp-modern-card {
    transition: all 0.3s ease;
    overflow: hidden;
}

.fp-modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18) !important;
}

.header-icon-wrapper {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.fp-modern-card:hover .header-icon-wrapper {
    transform: rotate(360deg) scale(1.1);
}

/* Gym Class Items */
.class-item,
.member-item {
    transition: all 0.3s ease;
    position: relative;
    animation: fadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.class-item:nth-child(1),
.member-item:nth-child(1) {
    animation-delay: 0.1s;
}

.class-item:nth-child(2),
.member-item:nth-child(2) {
    animation-delay: 0.2s;
}

.class-item:nth-child(3),
.member-item:nth-child(3) {
    animation-delay: 0.3s;
}

.class-item:nth-child(4),
.member-item:nth-child(4) {
    animation-delay: 0.4s;
}

.class-item:nth-child(5),
.member-item:nth-child(5) {
    animation-delay: 0.5s;
}

.class-item:hover {
    background: linear-gradient(90deg, #f0f9ff 0%, #fff 100%);
    transform: translateX(8px);
    border-left: 4px solid #4facfe !important;
}

.member-item:hover {
    background: linear-gradient(90deg, #f0fdf4 0%, #fff 100%);
    transform: translateX(8px);
    border-left: 4px solid #22c55e !important;
}

.fp-class-icon-wrapper {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
}

.class-item:hover .fp-class-icon-wrapper {
    transform: rotate(360deg) scale(1.1);
}

.class-name,
.member-name {
    color: #1e293b;
    transition: color 0.3s ease;
}

.class-item:hover .class-name {
    color: #4facfe;
}

.member-item:hover .member-name {
    color: #22c55e;
}

.member-avatar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
}

.member-item:hover .member-avatar {
    transform: scale(1.15);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Quick Action Buttons */
.quick-action-btn {
    transition: all 0.3s ease;
    border-width: 2px;
}

.quick-action-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.quick-action-btn i {
    transition: all 0.3s ease;
}

.quick-action-btn:hover i {
    transform: scale(1.2);
}

/* Empty States */
.empty-state-icon {
    font-size: 4rem;
    color: #cbd5e1;
    animation: float 3s ease-in-out infinite;
}

/* Gradient Backgrounds */
.bg-gradient-info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Gym Owner Dashboard Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* Gym Owner Dashboard Responsive */
@media (max-width: 768px) {
    .quick-action-btn {
        padding: 1rem !important;
    }
    
    .quick-action-btn i {
        font-size: 1.5rem !important;
    }
    gap: var(--fp-space-2);
}

/* Meal Reminders */
.fp-meal-reminders {
    background: linear-gradient(180deg, var(--fp-primary-navy) 0%, #1e3a5f 100%);
    border-radius: var(--fp-radius-2xl);
    padding: var(--fp-space-6);
    color: var(--fp-text-inverse);
}

.fp-meal-reminders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-5);
}

.fp-meal-reminders-header h5 {
    margin: 0;
    font-weight: var(--fp-font-bold);
}

.fp-meal-reminders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 991px) {
    .fp-meal-reminders-grid {
        gap: var(--fp-space-3);
    }
    
    .fp-reminder-icon {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .fp-meal-reminders {
        padding: var(--fp-space-5);
    }
    
    .fp-meal-reminders-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fp-space-3);
    }
    
    .fp-reminder-item {
        padding: var(--fp-space-3);
    }
    
    .fp-reminder-icon {
        font-size: 1.5rem;
        margin-bottom: var(--fp-space-1);
    }
    
    .fp-reminder-title {
        font-size: var(--fp-text-sm);
    }
    
    .fp-reminder-time,
    .fp-reminder-meal {
        font-size: var(--fp-text-xs);
    }
}

@media (max-width: 575px) {
    .fp-meal-reminders-grid {
        grid-template-columns: 1fr;
        gap: var(--fp-space-3);
    }
    
    .fp-reminder-item {
        padding: var(--fp-space-4);
    }
    
    .fp-reminder-icon {
        font-size: 2rem;
    }
}

.fp-reminder-item {
    background: rgba(255, 255, 255, 0.08);
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-lg);
    text-align: center;
    transition: all 0.3s ease;
}

.fp-reminder-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.fp-reminder-icon {
    font-size: 2rem;
    margin-bottom: var(--fp-space-2);
}

.fp-reminder-icon.breakfast { color: #FBBF24; }
.fp-reminder-icon.lunch { color: #38BDF8; }
.fp-reminder-icon.dinner { color: #A78BFA; }

.fp-reminder-title {
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-1);
}

.fp-reminder-time {
    font-size: var(--fp-text-sm);
    opacity: 0.7;
}

.fp-reminder-meal {
    font-size: var(--fp-text-sm);
    color: #60A5FA;
    margin-top: var(--fp-space-2);
}

/* Quick Action Cards */
.fp-nutrition-action {
    display: block;
    text-decoration: none;
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-6);
    text-align: center;
    box-shadow: var(--fp-shadow-sm);
    transition: all 0.3s ease;
}

.fp-nutrition-action:hover {
    transform: translateY(-5px);
    box-shadow: var(--fp-shadow-lg);
    text-decoration: none;
}

.fp-nutrition-action-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fp-space-4);
}

.fp-nutrition-action-icon.browse { background: linear-gradient(135deg, var(--fp-primary-sky) 0%, var(--fp-accent-success) 100%); }
.fp-nutrition-action-icon.calculator { background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); }
.fp-nutrition-action-icon.history { background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%); }
.fp-nutrition-action-icon.analytics { background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%); }

.fp-nutrition-action-icon i {
    font-size: 1.5rem;
    color: var(--fp-text-inverse);
}

.fp-nutrition-action-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-nutrition-action-desc {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
    margin: 0;
}

/* Food List/Grid */
.fp-food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--fp-space-5);
}

.fp-food-card {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.fp-food-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--fp-shadow-md);
}

.fp-food-card-image {
    height: 160px;
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fp-food-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-food-card-image i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
}

.fp-food-card-body {
    padding: var(--fp-space-5);
}

.fp-food-card-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    margin-bottom: var(--fp-space-2);
}

.fp-food-card-serving {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
    margin-bottom: var(--fp-space-3);
}

.fp-food-card-macros {
    display: flex;
    justify-content: space-between;
    padding-top: var(--fp-space-3);
    border-top: 1px solid var(--fp-border-color);
}

.fp-food-macro {
    text-align: center;
}

.fp-food-macro-value {
    font-weight: var(--fp-font-bold);
    font-size: var(--fp-text-sm);
}

.fp-food-macro-value.calories { color: #F97316; }
.fp-food-macro-value.protein { color: var(--fp-accent-success); }
.fp-food-macro-value.carbs { color: #F59E0B; }
.fp-food-macro-value.fat { color: #8B5CF6; }

.fp-food-macro-label {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-secondary);
}

/* Meals Filter Card */
.fp-meals-filter {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-xl);
    padding: var(--fp-space-5);
    margin-bottom: var(--fp-space-6);
    box-shadow: var(--fp-shadow-sm);
}

.fp-meals-filter .fp-form-row {
    display: flex;
    gap: var(--fp-space-4);
    flex-wrap: wrap;
    align-items: flex-end;
}

@media (max-width: 767px) {
    .fp-meals-filter .fp-form-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .fp-meals-filter .fp-form-group {
        width: 100%;
    }
}

/* Empty State */
.fp-nutrition-empty {
    text-align: center;
    padding: var(--fp-space-12) var(--fp-space-4);
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-2xl);
    box-shadow: var(--fp-shadow-sm);
}

.fp-nutrition-empty i {
    font-size: 4rem;
    color: var(--fp-primary-royal);
    opacity: 0.3;
    margin-bottom: var(--fp-space-5);
}

.fp-nutrition-empty h4 {
    color: var(--fp-text-primary);
    font-weight: var(--fp-font-semibold);
    margin-bottom: var(--fp-space-3);
}

.fp-nutrition-empty p {
    color: var(--fp-text-secondary);
    margin-bottom: var(--fp-space-6);
}

.fp-nutrition-empty-actions {
    display: flex;
    justify-content: center;
    gap: var(--fp-space-3);
    flex-wrap: wrap;
}

.fp-nutrition-empty-actions .fp-btn {
    padding: 0.65rem 1.5rem;
    font-weight: var(--fp-font-medium);
    font-size: 0.9375rem;
    border-radius: var(--fp-radius-lg);
    transition: all 0.3s ease;
    line-height: 1.5;
}

.fp-nutrition-empty-actions .fp-btn-primary {
    background: linear-gradient(135deg, var(--fp-primary-royal), #6366F1);
    color: var(--fp-text-inverse);
    border: none;
}

.fp-nutrition-empty-actions .fp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(19, 99, 223, 0.3);
    color: var(--fp-text-inverse);
}

.fp-nutrition-empty-actions .fp-btn-outline-primary {
    background: transparent;
    border: 2px solid var(--fp-primary-royal);
    color: var(--fp-primary-royal);
}

.fp-nutrition-empty-actions .fp-btn-outline-primary:hover {
    background: var(--fp-primary-royal);
    color: var(--fp-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(19, 99, 223, 0.2);
}

/* Page Hero Section */
.fp-page-hero {
    position: relative;
    overflow: hidden;
    padding: var(--fp-space-10) 0;
    height: 276px;
    min-height: 276px;
    background: linear-gradient(135deg, var(--fp-primary-navy) 0%, var(--fp-primary-royal) 100%);
    margin-bottom: var(--fp-space-5);
    border-radius: 0;
}

.fp-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E);
    opacity: 0.3;
    pointer-events: none;
}

.fp-page-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.fp-page-hero-title {
    font-size: var(--fp-text-4xl);
    font-weight: var(--fp-font-bold);
    color: #FFFFFF;
    margin-bottom: var(--fp-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-3);
    flex-wrap: nowrap;
}

.fp-page-hero-title i {
    color: var(--fp-primary-sky);
    font-size: var(--fp-text-3xl);
    flex-shrink: 0;
}

.fp-page-hero-subtitle {
    font-size: var(--fp-text-lg);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--fp-space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 var(--fp-space-4);
}

@media (max-width: 767px) {
    .fp-page-hero {
        padding: var(--fp-space-8) 0;
        height: auto;
    }
    
    .fp-page-hero-title {
        font-size: var(--fp-text-3xl);
    }
    
    .fp-page-hero-title i {
        font-size: var(--fp-text-2xl);
    }
    
    .fp-page-hero-subtitle {
        font-size: var(--fp-text-base);
    }
}

/* Nutrition Goals */
.fp-nutrition-goals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fp-space-4);
}

@media (max-width: 991px) {
    .fp-nutrition-goals {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .fp-nutrition-goals {
        grid-template-columns: 1fr;
    }
    
    .fp-nutrition-empty {
        padding: var(--fp-space-8) var(--fp-space-4);
    }
    
    .fp-nutrition-empty-actions {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }
    
    .fp-nutrition-empty-actions .fp-btn {
        flex: 0 1 auto;
    }
}

.fp-nutrition-goal {
    background: var(--fp-bg-primary);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-4);
    box-shadow: var(--fp-shadow-sm);
.fp-nutrition-stat.carbs {
    /* Carbs: blue theme to match dashboard color semantics */
    background: linear-gradient(135deg, var(--fp-primary-sky, #47B5FF) 0%, var(--fp-primary-royal, #1363DF) 100%);
}
.fp-nutrition-stat.fat {
    /* Fats: yellow/gold theme to indicate fats */
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
}
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-3);
}

.fp-nutrition-goal-title {
    font-weight: var(--fp-font-semibold);
    color: var(--fp-text-primary);
    font-size: var(--fp-text-sm);
}

.fp-nutrition-goal-percent {
    font-size: var(--fp-text-xs);
    padding: var(--fp-space-1) var(--fp-space-2);
    border-radius: var(--fp-radius-full);
    background: var(--fp-primary-royal);
    color: var(--fp-text-inverse);
    font-weight: var(--fp-font-semibold);
}

.fp-nutrition-goal-progress {
    height: 8px;
    background: var(--fp-gray-200);
    border-radius: var(--fp-radius-full);
    overflow: hidden;
    margin-bottom: var(--fp-space-2);
}

.fp-nutrition-goal-bar {
    height: 100%;
    background: var(--fp-primary-royal);
    border-radius: var(--fp-radius-full);
    transition: width 0.5s ease;
}

.fp-nutrition-goal-category {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-secondary);
}

/* Log Food Button */
.fp-log-food-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    width: 100%;
    padding: var(--fp-space-4);
    background: linear-gradient(90deg, var(--fp-primary-royal), #6366F1);
    color: var(--fp-text-inverse);
    border: none;
    border-radius: var(--fp-radius-xl);
    font-weight: var(--fp-font-bold);
    font-size: var(--fp-text-base);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: var(--fp-space-5);
}

.fp-log-food-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(19, 99, 223, 0.3);
    color: var(--fp-text-inverse);
}

/* Responsive Calorie Balance Card */
@media (max-width: 991px) {
    .fp-calorie-ring {
        width: 140px;
        height: 140px;
    }
    
    .fp-calorie-ring svg {
        width: 140px;
        height: 140px;
    }
    
    .fp-calorie-metric i {
        font-size: 1.25rem;
    }
    
    .fp-calorie-metric h3 {
        font-size: var(--fp-text-xl);
    }
}

@media (max-width: 767px) {
    .fp-calorie-balance-main {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--fp-space-4);
    }
    
    .fp-calorie-ring {
        width: 180px;
        height: 180px;
        order: -1;
        flex-basis: 100%;
        display: flex;
        justify-content: center;
    }
    
    .fp-calorie-ring svg {
        width: 180px;
        height: 180px;
    }
    
    .fp-calorie-metric {
        flex: 0 0 auto;
        min-width: 120px;
    }
    
    .fp-calorie-metric.eaten {
        order: 1;
    }
    
    .fp-calorie-metric.exercise {
        order: 2;
    }
    
    .fp-macros-grid {
        gap: var(--fp-space-4);
    }
    
    .fp-macro-ring {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 576px) {
    .fp-calorie-balance {
        padding: var(--fp-space-5);
    }
    
    .fp-calorie-ring {
        width: 160px;
        height: 160px;
    }
    
    .fp-calorie-ring svg {
        width: 160px;
        height: 160px;
    }
    
    .fp-calorie-ring-value {
        font-size: var(--fp-text-2xl);
    }
    
    .fp-macro-ring {
        width: 70px;
        height: 70px;
    }
}

/* Nutrition Page Content */
.fp-nutrition-content {
    padding: var(--fp-space-8) 0;
}

.fp-nutrition-section {
    margin-bottom: var(--fp-space-10);
}

.fp-nutrition-section-title {
    text-align: center;
    color: var(--fp-text-secondary);
    font-weight: var(--fp-font-normal);
    margin-bottom: var(--fp-space-6);
}

/* Food Scanner Page */
.fp-scanner-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--fp-space-6);
}

.fp-scanner-preview {
    background: var(--fp-primary-navy);
    border-radius: var(--fp-radius-2xl);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--fp-space-5);
    overflow: hidden;
}

.fp-scanner-preview i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
}

.fp-scanner-actions {
    display: flex;
    gap: var(--fp-space-3);
}

.fp-scanner-actions .fp-btn {
    flex: 1;
}


/* ============================================================================
   WORKOUT INDEX & DASHBOARD PAGE CARD HEADER STYLES
   ============================================================================ */

/* Card Header Variants */
.fp-card-header-royal-gradient {
    background: linear-gradient(135deg, var(--fp-primary-royal) 0%, var(--fp-primary-navy) 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-royal-gradient h5,
.fp-card-header-royal-gradient h4,
.fp-card-header-royal-gradient h3,
.fp-card-header-royal-gradient h6 {
    color: white !important;
}

.fp-card-header-royal-gradient i,
.fp-card-header-royal-gradient .fa,
.fp-card-header-royal-gradient .fas,
.fp-card-header-royal-gradient .far {
    color: white !important;
}

.fp-card-header-royal-gradient small,
.fp-card-header-royal-gradient .small,
.fp-card-header-royal-gradient p,
.fp-card-header-royal-gradient span {
    color: white !important;
}

.fp-card-header-success-gradient {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #059669 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-success-gradient h5,
.fp-card-header-success-gradient h4,
.fp-card-header-success-gradient h3,
.fp-card-header-success-gradient h6 {
    color: white !important;
}

.fp-card-header-success-gradient i,
.fp-card-header-success-gradient .fa,
.fp-card-header-success-gradient .fas,
.fp-card-header-success-gradient .far {
    color: white !important;
}

.fp-card-header-success-gradient small,
.fp-card-header-success-gradient .small,
.fp-card-header-success-gradient p,
.fp-card-header-success-gradient span {
    color: white !important;
}

.fp-card-header-success-dark-gradient {
    background: linear-gradient(135deg, var(--fp-accent-success) 0%, #047857 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-success-dark-gradient h5,
.fp-card-header-success-dark-gradient h4,
.fp-card-header-success-dark-gradient h3,
.fp-card-header-success-dark-gradient h6 {
    color: white !important;
}

.fp-card-header-success-dark-gradient i,
.fp-card-header-success-dark-gradient .fa,
.fp-card-header-success-dark-gradient .fas,
.fp-card-header-success-dark-gradient .far {
    color: white !important;
}

.fp-card-header-success-dark-gradient small,
.fp-card-header-success-dark-gradient .small,
.fp-card-header-success-dark-gradient p,
.fp-card-header-success-dark-gradient span {
    color: white !important;
}

.fp-card-header-orange-gradient {
    background: linear-gradient(135deg, var(--fp-accent-orange) 0%, #E65100 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-orange-gradient h5,
.fp-card-header-orange-gradient h4,
.fp-card-header-orange-gradient h3,
.fp-card-header-orange-gradient h6 {
    color: white !important;
}

.fp-card-header-orange-gradient i,
.fp-card-header-orange-gradient .fa,
.fp-card-header-orange-gradient .fas,
.fp-card-header-orange-gradient .far {
    color: white !important;
}

.fp-card-header-orange-gradient small,
.fp-card-header-orange-gradient .small,
.fp-card-header-orange-gradient p,
.fp-card-header-orange-gradient span {
    color: white !important;
}

.fp-card-header-danger-gradient {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-danger-gradient h5,
.fp-card-header-danger-gradient h4,
.fp-card-header-danger-gradient h3,
.fp-card-header-danger-gradient h6 {
    color: white !important;
}

.fp-card-header-danger-gradient i,
.fp-card-header-danger-gradient .fa,
.fp-card-header-danger-gradient .fas,
.fp-card-header-danger-gradient .far {
    color: white !important;
}

.fp-card-header-danger-gradient small,
.fp-card-header-danger-gradient .small,
.fp-card-header-danger-gradient p,
.fp-card-header-danger-gradient span {
    color: white !important;
}

.fp-card-header-cyan-gradient {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-cyan-gradient h5,
.fp-card-header-cyan-gradient h4,
.fp-card-header-cyan-gradient h3,
.fp-card-header-cyan-gradient h6 {
    color: white !important;
}

.fp-card-header-cyan-gradient i,
.fp-card-header-cyan-gradient .fa,
.fp-card-header-cyan-gradient .fas,
.fp-card-header-cyan-gradient .far {
    color: white !important;
}

.fp-card-header-cyan-gradient small,
.fp-card-header-cyan-gradient .small,
.fp-card-header-cyan-gradient p,
.fp-card-header-cyan-gradient span {
    color: white !important;
}

.fp-card-header-warning-gradient {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-warning-gradient h5,
.fp-card-header-warning-gradient h4,
.fp-card-header-warning-gradient h3,
.fp-card-header-warning-gradient h6 {
    color: white !important;
}

.fp-card-header-warning-gradient i,
.fp-card-header-warning-gradient .fa,
.fp-card-header-warning-gradient .fas,
.fp-card-header-warning-gradient .far {
    color: white !important;
}

.fp-card-header-warning-gradient small,
.fp-card-header-warning-gradient .small,
.fp-card-header-warning-gradient p,
.fp-card-header-warning-gradient span {
    color: white !important;
}

.fp-card-header-purple-gradient {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
    border-bottom: none;
}

.fp-card-header-purple-gradient h5,
.fp-card-header-purple-gradient h4,
.fp-card-header-purple-gradient h3,
.fp-card-header-purple-gradient h6 {
    color: white !important;
}

.fp-card-header-purple-gradient i,
.fp-card-header-purple-gradient .fa,
.fp-card-header-purple-gradient .fas,
.fp-card-header-purple-gradient .far {
    color: white !important;
}

.fp-card-header-purple-gradient small,
.fp-card-header-purple-gradient .small,
.fp-card-header-purple-gradient p,
.fp-card-header-purple-gradient span {
    color: white !important;
}

.fp-card-header-title {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
}

.fp-card-header .d-flex {
    width: 100%;
}

/* Icon Color Utilities */
.fp-icon-royal {
    color: var(--fp-primary-royal);
}

.fp-icon-success {
    color: var(--fp-accent-success);
}

.fp-icon-danger {
    color: var(--fp-accent-danger);
}

.fp-icon-muted {
    color: var(--fp-text-muted);
}

/* Empty State Styles */
.fp-empty-state-text {
    color: var(--fp-text-muted);
}

/* Form Inline Display */
.fp-form-inline {
    display: inline;
}

/* Small Text Muted */
.fp-small-text-muted {
    color: var(--fp-text-muted);
}


/* ============================================================================
   EMPTY STATE BUTTON STYLES (Large CTA Buttons)
   ============================================================================ */

.fp-btn-empty-state {
    border-radius: 12px !important;
    padding: 16px 32px !important;
    border: 1.6px solid transparent !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    height: 51.2px !important;
    width: 255px !important;
    column-gap: 8px !important;
    transition: all 0.2s ease !important;
}

.fp-btn-empty-state:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}


/* ============================================================================
   FORM STYLES (Preferences & Settings Pages)
   ============================================================================ */

/* Form checkbox and switch checked states */
.form-check-input:checked {
    background-color: var(--fp-primary-royal);
    border-color: var(--fp-primary-royal);
}

.form-switch .form-check-input:checked {
    background-color: var(--fp-primary-royal);
    border-color: var(--fp-primary-royal);
}

/* Form input focus states */
.form-select:focus,
.form-control:focus {
    border-color: var(--fp-primary-royal);
    box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
}

/* Large button styles */
.btn-lg {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   WORKOUT COMPLETE MODAL STYLES
   ============================================================================ */

/* Modal Header with Gradient */
.fp-modal-header-gradient {
    background: linear-gradient(135deg, #1363DF 0%, #06283D 100%);
    padding: 2rem;
    border-radius: 15px 15px 0 0;
}

.fp-modal-header-gradient .modal-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0;
}

/* Modal Body Padding */
.fp-modal-body-padded {
    padding: 2rem;
}

/* Modern Form Inputs */
.fp-form-input-modern {
    border-width: 2px;
    border-color: #e0e7ff;
    background-color: #f8fafc;
}

.fp-form-input-modern:focus {
    border-color: #1363DF;
    background-color: #ffffff;
}

/* Textarea No Resize */
.fp-textarea-no-resize {
    resize: none;
}

/* Modal Footer Centered */
.fp-modal-footer-centered {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Form Label with Icon */
.fp-form-label-icon {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   WORKOUT HISTORY PAGE STYLES
   ============================================================================ */

/* Stat Card Gradient Backgrounds */
.fp-stat-card-blue {
    background: linear-gradient(135deg, #1363DF 0%, #0d4ba1 100%) !important;
}

.fp-stat-card-royal {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

.fp-stat-card-green {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

.fp-stat-card-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

.fp-stat-card-cyan {
    background: linear-gradient(135deg, #06B6D4 0%, #0891b2 100%) !important;
}

.fp-stat-card-orange {
    background: linear-gradient(135deg, #F59E0B 0%, #d97706 100%) !important;
}

.fp-stat-card-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.fp-stat-card-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

/* Smaller Value for Long Numbers */
.fp-stat-card-value-sm {
    font-size: 2rem;
}

/* Session Card Header */
.fp-session-card-header {
    background: linear-gradient(135deg, var(--fp-primary-royal), var(--fp-primary-sky));
}

.fp-session-card-header h6,
.fp-session-card-header small {
    color: #ffffff;
}

.fp-session-card-header small {
    opacity: 0.85;
}

/* Session Stat Colors */
.fp-session-stat-primary {
    color: var(--fp-primary-royal);
}

.fp-session-stat-success {
    color: var(--fp-accent-success);
}

.fp-session-stat-info {
    color: var(--fp-accent-info);
}

.fp-session-stat-warning {
    color: var(--fp-accent-warning);
}

/* Opacity Helper */
.fp-opacity-85 {
    opacity: 0.85;
}

/* Display Inline Helper */
.fp-display-inline {
    display: inline;
}

/* ============================================================================
   SMART WORKOUTS PAGE STYLES
   ============================================================================ */

/* Tip List Items */
.fp-tip-item {
    background-color: var(--fp-accent-success-light);
}

/* Small Text Button/Link */
.fp-text-sm-button {
    font-size: 14px;
}

/* ============================================================================
   SESSION SUMMARY PAGE STYLES
   ============================================================================ */

/* Hero Gradients */
.fp-hero-gradient-success {
    background: linear-gradient(135deg, var(--fp-accent-success), #34d399);
}

/* Card Header Gradients */
.fp-card-header-gradient-blue {
    background: linear-gradient(135deg, #1363DF, #47B5FF) !important;
    color: #FFFFFF !important;
}

.fp-card-header-gradient-purple {
    background: linear-gradient(135deg, #8B5CF6, #a78bfa) !important;
    color: #FFFFFF !important;
}

.fp-card-header-gradient-orange {
    background: linear-gradient(135deg, #F97316, #fb923c) !important;
    color: #FFFFFF !important;
}

/* Header Text Color */
.fp-card-header-text-white {
    color: #FFFFFF !important;
}

.fp-card-header-gradient-light-blue {
    background: linear-gradient(135deg, #47B5FF, #DFF6FF) !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   SIMPLE WORKOUT PAGE STYLES
   ============================================================================ */

/* Workout Card Hover Effect */
.fp-workout-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fp-workout-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Exercise List Item */
.fp-exercise-list-item {
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--fp-bg-secondary);
    border-radius: var(--fp-border-radius);
}

.fp-exercise-list-item:hover {
    border-left-color: var(--fp-primary-royal);
    background-color: var(--fp-bg-tertiary);
    transform: translateX(5px);
}

/* Workout Stats Mini Card */
.fp-workout-stat-mini {
    background: linear-gradient(135deg, var(--fp-bg-secondary), var(--fp-bg-tertiary));
    border: 1px solid var(--fp-border-primary);
    border-radius: var(--fp-border-radius);
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.fp-workout-stat-mini:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fp-workout-stat-mini h4 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.fp-workout-stat-mini small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Exercise Badge */
.fp-exercise-badge {
    background: var(--fp-primary-royal);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Workout Header Center */
.fp-workout-header-center {
    text-align: center;
    margin-bottom: 2rem;
}

.fp-workout-header-center h1 {
    background: linear-gradient(135deg, var(--fp-primary-royal), var(--fp-primary-sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Workout Card Header with Gradient */
.fp-workout-card-header {
    background: linear-gradient(135deg, var(--fp-primary-royal), var(--fp-primary-sky));
    color: white;
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--fp-border-radius) var(--fp-border-radius) 0 0;
}

.fp-workout-card-header h3 {
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.fp-workout-card-header small {
    opacity: 0.9;
    font-size: 0.875rem;
}

/* ============================================================================
   WORKOUT DETAIL PAGE STYLES
   ============================================================================ */

/* Star Rating */
.fp-star-rating {
    font-size: 1.5rem;
    cursor: pointer;
    color: #dee2e6;
    margin-right: 0.25rem;
    transition: color 0.2s ease;
}

.fp-star-rating.active {
    color: #FFC107;
}

.fp-star-rating:hover {
    color: #FFD700;
}

/* ============================================================================
   SCANNER VIDEO STYLES
   ============================================================================ */

.fp-scanner-video {
    max-width: 500px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

/* ============================================================================
   SETTINGS PAGE MOBILE ACTIONS
   ============================================================================ */

/* Desktop: buttons appear at bottom of left column */
.fp-settings-actions {
    margin-top: 2rem;
}

@media (max-width: 767px) {
    /* Use flexbox to reorder content on mobile */
    .fp-settings-layout {
        display: flex;
        flex-direction: column;
    }
    
    /* Form content appears first (order 1) */
    .fp-settings-form-col {
        order: 1;
    }
    
    /* Sidebar appears second (order 2) */
    .fp-settings-sidebar-col {
        order: 2;
    }
    
    /* Action buttons appear last (order 3) - after Quick Tips */
    .fp-settings-actions {
        order: 3;
        margin-top: 2rem !important;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .fp-settings-actions .fp-btn {
        width: 100%;
        margin: 0 !important;
    }
}


/* ============================================================================
   BORDER LEFT ACCENT STYLES
   ============================================================================ */

.fp-border-left-orange {
    border-left: 4px solid #f59e0b !important;
}

.fp-border-left-danger {
    border-left: 4px solid #ef4444 !important;
}

.fp-border-left-cyan {
    border-left: 4px solid #0ea5e9 !important;
}

.fp-border-left-success {
    border-left: 4px solid #22c55e !important;
}

.fp-border-left-warning {
    border-left: 4px solid #f59e0b !important;
}

/* ============================================================================
   EMPTY STATE ICON STYLES
   ============================================================================ */

.fp-empty-state-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.fp-empty-state-icon-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}


/* ============================================================================
   INSIGHT PROGRESS BAR STYLES
   ============================================================================ */

.insight-progress {
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.insight-bar {
    height: 100%;
    transition: width 1s ease;
}

.insight-bar-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.insight-bar-blue {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

.insight-bar-yellow {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.animated-bar {
    width: 0;
}


/* ============================================================================
   TRAINER CLIENT ACHIEVEMENTS PAGE
   ============================================================================ */

/* Hero Icon */
    .achievement-hero-icon {
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: var(--primary-sky);
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    .achievement-stat {
        color: white;
        font-family: 'Poppins', sans-serif;
    }
    
    /* Certificate Preview Cards */
    .certificate-preview-card {
        background: linear-gradient(135deg, #fffef5 0%, #ffffff 100%);
        border: 2px solid #ffd700;
        border-radius: 16px;
        padding: 1.25rem;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .certificate-preview-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
    }
    
    .certificate-badge {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: white;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .certificate-info {
        flex: 1;
    }
    
    /* Earned Achievement Cards */
    .earned-achievement-card {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 1rem;
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .earned-achievement-card:hover {
        border-color: var(--primary-sky);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(71, 181, 255, 0.2);
    }
    
    .earned-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--primary-royal) 0%, var(--primary-navy) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: white;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(19, 99, 223, 0.3);
    }
    
    /* Category Title */
    .category-title {
        color: var(--primary-navy);
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        padding-bottom: 0.5rem;
        border-bottom: 3px solid var(--primary-sky);
        display: inline-block;
    }
    
    .category-title i {
        color: var(--primary-sky);
    }
    
    /* Achievement Cards */
    .achievement-card {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .achievement-card:hover {
        border-color: var(--primary-sky);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(71, 181, 255, 0.2);
    }
    
    .achievement-card.awarded {
        background: linear-gradient(135deg, #fffef5 0%, #ffffff 100%);
        border-color: #ffc107;
    }
    
    .awarded-ribbon {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #ffc107;
        color: #000;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
        animation: pulse-ribbon 2s infinite;
    }
    
    @keyframes pulse-ribbon {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .achievement-medal {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: white;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        position: relative;
    }
    
    .achievement-medal::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
        z-index: -1;
    }
    
    .achievement-title {
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        color: var(--primary-navy);
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
    }
    
    .achievement-description {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.75rem;
        flex-grow: 1;
    }
    
    .achievement-points-display {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        color: #ffc107;
    }
    
    .award-btn {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .award-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(19, 99, 223, 0.3);
    }
    
    /* Certificate Preview in Modal */
    .certificate-preview-container {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 2px dashed #dee2e6;
        border-radius: 12px;
    }
    
    .certificate-mini-preview {
        background: white;
        border: 3px double #ddd;
        border-radius: 8px;
        padding: 2rem;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .preview-badge {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    }
    
    .preview-title {
        font-family: 'Playfair Display', serif;
        color: #333;
    }
    
    .preview-subtitle, .preview-award {
        font-size: 0.875rem;
        color: #666;
    }
    
    .preview-recipient {
        color: var(--primary-navy);
        font-family: 'Playfair Display', serif;
    }
    
    /* Confetti Container */
    .confetti-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
    }
    
    /* Toast Notification */
    .achievement-toast {
        position: fixed;
        top: 100px;
        right: 20px;
        min-width: 320px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        padding: 1.25rem;
        z-index: 10000;
        animation: slideInRight 0.4s ease;
        border-left: 4px solid;
    }
    
    .achievement-toast.success {
        border-left-color: #28a745;
    }
    
    .achievement-toast.error {
        border-left-color: #dc3545;
    }
    
    .achievement-toast.info {
        border-left-color: var(--primary-royal);
    }
    
    @keyframes slideInRight {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }
    
    /* Gradient backgrounds */
    .bg-gradient-primary {
        background: linear-gradient(135deg, var(--primary-royal) 0%, var(--primary-navy) 100%) !important;
    }
    
    .bg-gradient-warning {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    }

/* Session Type Card Selectors */
.session-type-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    background: white;
}

.session-type-card:hover {
    border-color: #1e40af;
    background: rgba(30, 64, 175, 0.05);
}

.session-type-card.selected {
    border-color: #1e40af;
    background: rgba(30, 64, 175, 0.1);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}

.session-type-card i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: #1e40af;
}


/* Method buttons */
.fp-method-buttons {
    display: flex;
    gap: var(--fp-space-4);
    flex-wrap: wrap;
}

.fp-method-btn {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-5);
    background: var(--fp-bg-secondary);
    border: 2px solid var(--fp-border-color);
    border-radius: var(--fp-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fp-method-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--fp-shadow-md);
}

.fp-method-btn.active {
    background: var(--fp-primary-royal);
    border-color: var(--fp-primary-royal);
    color: white;
}

.fp-method-btn i {
    color: var(--fp-primary-royal);
}

.fp-method-btn.active i {
    color: white;
}

.fp-method-btn small {
    color: var(--fp-text-secondary);
    font-size: 0.8rem;
}

.fp-method-btn.active small {
    color: rgba(255,255,255,0.8);
}

/* Scanner placeholder */
.fp-scanner-placeholder {
    background: var(--fp-bg-secondary);
    border: 2px dashed var(--fp-border-color);
    border-radius: var(--fp-radius-lg);
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-3);
    color: var(--fp-text-secondary);
}

.fp-scanner-placeholder i {
    opacity: 0.5;
}

/* Alert styles */
.fp-alert {
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-md);
    margin-bottom: var(--fp-space-4);
}

.fp-alert-info {
    background: var(--fp-primary-light);
    color: var(--fp-primary-navy);
    border-left: 4px solid var(--fp-primary-royal);
}

.fp-alert-warning {
    background: #fef3cd;
    color: #856404;
    border-left: 4px solid #f59e0b;
}

.fp-alert-success {
    background: #d4edda;
    color: #155724;
    border-left: 4px solid var(--fp-success);
}

.fp-alert-danger {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

/* ==========================================
   ADMIN DASHBOARD HERO SECTION
   ========================================== */

/* Admin Sidebar Styles */
.admin-sidebar {
    min-height: 100vh;
}

.admin-sidebar-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001;
}

/* Admin Hero Section */
.admin-hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 60px 40px;
    margin-bottom: 40px;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.admin-hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: hero-glow 8s ease-in-out infinite;
}

@keyframes hero-glow {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.admin-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.admin-hero-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.admin-hero-icon i {
    font-size: 48px;
    color: white;
    animation: pulse-icon 2s ease-in-out infinite;
}

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

.admin-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    font-family: 'Barlow', sans-serif;
}

.admin-hero-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 800px;
    margin: 0 auto 50px;
    line-height: 1.8;
    font-weight: 400;
}

/* Admin Role Buttons */
.admin-role-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.admin-role-btn {
    background: white;
    border-radius: 16px;
    padding: 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.admin-role-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.admin-role-btn:hover::before {
    left: 100%;
}

.admin-role-btn:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.role-icon {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.user-role .role-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gym-owner-role .role-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.trainer-role .role-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.role-icon i {
    font-size: 32px;
    color: white;
}

.admin-role-btn:hover .role-icon {
    transform: rotate(5deg) scale(1.1);
}

.role-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2d3748;
    font-family: 'Barlow', sans-serif;
}

.role-content p {
    font-size: 0.95rem;
    color: #718096;
    margin: 0;
    line-height: 1.5;
}

.user-role:hover .role-content h3 {
    color: #667eea;
}

.gym-owner-role:hover .role-content h3 {
    color: #f5576c;
}

.trainer-role:hover .role-content h3 {
    color: #00f2fe;
}

/* Admin Progress Bar Animation */
.admin-progress-bar {
    transition: width 1s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-hero-section {
        padding: 40px 20px;
    }
    
    .admin-hero-title {
        font-size: 2rem;
    }
    
    .admin-hero-description {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    
    .admin-role-buttons {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .admin-role-btn {
        padding: 20px;
    }
    
    .role-icon {
        width: 60px;
        height: 60px;
    }
    
    .role-icon i {
        font-size: 28px;
    }
    
    .role-content h3 {
        font-size: 1.25rem;
    }
}

/* Admin View As Role Switcher (legacy - kept for compatibility) */
.view-as-role-card {
    font-size: 0.85rem;
}

/* ============================================================================
   INTEGRATION DEVICES PAGE STYLES
   ============================================================================ */

/* Progress Ring Animation */
.progress-ring__circle {
    transition: stroke-dasharray 0.35s;
}

/* Device Icon Styles */
.device-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fp-primary-light) 0%, #f8f9fa 100%);
    border-radius: 10px;
}

.device-icon-large {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover Effects for Cards */
.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Device Setup Page Styles */
.device-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.device-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.device-card.connected {
    border-left: 4px solid #28a745 !important;
}

.device-icon-wrapper .device-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}