/* Components */
        /* ==================== BUTTONS ==================== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            border: none;
            border-radius: var(--radius);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            font-size: 14px;
        }
        .btn:hover { transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-secondary {
            background: var(--gray-100);
            color: var(--gray-700);
            border: 1px solid var(--gray-200);
        }
        .btn-secondary:hover { background: var(--gray-200); }
        .btn-danger {
            background: var(--accent-red);
            color: white;
        }
        .btn-danger:hover { background: #dc2626; }
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        .btn-outline:hover { background: var(--primary-light); }
        .btn-lg { padding: 14px 28px; font-size: 16px; }
        .btn-sm { padding: 6px 12px; font-size: 13px; }
        .btn-icon { padding: 8px; width: 36px; height: 36px; }
        

        /* ==================== CARDS ==================== */
        .card {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        .card:hover { box-shadow: var(--shadow-md); }
        .card-header { padding: 20px; border-bottom: 1px solid var(--gray-100); }
        .card-body { padding: 20px; }
        

        /* ==================== BADGES ==================== */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
        }
        .badge-success { background: #dcfce7; color: #166534; }
        .badge-warning { background: #fef9c3; color: #854d0e; }
        .badge-danger { background: #fee2e2; color: #991b1b; }
        .badge-info { background: #dbeafe; color: #1e40af; }
        .badge-purple { background: #f3e8ff; color: #7c3aed; }
        .badge-pink { background: #fce7f3; color: #be185d; }
        .badge-blue { background: #dbeafe; color: #1e40af; }
        .badge-gray { background: var(--gray-100); color: var(--gray-600); }
        

        /* ==================== AVATAR ==================== */
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: white;
        }
        .avatar-sm { width: 32px; height: 32px; font-size: 12px; }
        .avatar-lg { width: 56px; height: 56px; font-size: 18px; }
        

        /* ==================== PROGRESS BAR ==================== */
        .progress-bar {
            width: 100%;
            height: 8px;
            background: var(--gray-200);
            border-radius: 9999px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 9999px;
            transition: width 0.5s ease;
        }